Angular工具欄中的flexLayout <mat-toolbar>

Question

我在我的angular 5應用程序中使用flexLayout。 這是下面的代碼。 如您所見，我想在mat-toolbar和按鈕之間使用flex布局。 但是我沒有得到想要的輸出。 請查看下面的截圖以獲取結果。

<mat-toolbar color="primary">
  <div fxLayout="row">
    <div fxFlex="25%">
        <button mat-raised-button color="primary">
            <b>Home</b>
          </button>
    </div>
    <div fxFlex="25%">
        <button mat-button>
            <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
          </button>
    </div>
    <h1 fxFlex="25%">Dashboard</h1>
    <div fxFlex="25%">
        <button mat-raised-button color="primary">
            <b>Add App</b>
          </button>
    </div>
  </div>
</mat-toolbar>

看起來就是這樣

編輯：包含app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppMaterialModule } from './app-material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent
  ],
  imports: [
    BrowserModule,    
    AppMaterialModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

請幫忙。

謝謝

Answer 1

如果您將添加mat-toolbar-row而不是div，則可以使用

  <mat-toolbar color="primary">
      <mat-toolbar-row>
        <div fxFlex="25%">
            <button mat-raised-button color="primary">
                <b>Home</b>
              </button>
        </div>
        <div fxFlex="25%">
            <button mat-button>
                <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
              </button>
        </div>
        <h1 fxFlex="25%">Dashboard</h1>
        <div fxFlex="25%">
            <button mat-raised-button color="primary">
                <b>Add App</b>
              </button>
        </div>
     </mat-toolbar-row>
    </mat-toolbar>