Angular 5-Material Snackbar无法正常工作

Question

SnackBar占据了整个页面的高度。我不知道是什么问题，请参见下面的屏幕截图。

这是我的代码：

agentsmanagement.component.css

button {
    margin: 2px;
}

.selected{
    background:lightgray;
  }

  .example-sidenav {
    padding: 20px;
  }

  .example-sidenav-content {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: start;
    justify-content: center;
  }

  .btn-list {
      margin: 20px;
  }

  mat-header-cell {
    background-color:#B31B1B;
    color: white;
  }

agentsmanagement.component.html

<standard-page>
  <div>
    <form>
      <div fxLayout="row">
        <div fxFlex>
          <h1 mat-dialog-title color="primary" fxLayoutAlign="center">
            Agent Management
          </h1>
        </div>
        <div fxFlex="25" fxLayoutAlign="start">
          <mat-form-field>
            <input matInput placeholder="Search">
          </mat-form-field>
        </div>
      </div>
    </form>
  </div>
  <div mat-dialog-content>
    <div class="properties">
      <div fxFlex fxLayout="row" id="list-property" fxLayoutAlign="center">
        <div fxFlex="95" fxLayout="column" fxLayoutAlign="none" class="mat-elevation-z8">
          <mat-table #table [dataSource]="dataSource" matSort>
            <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
              <mat-header-cell *matHeaderCellDef mat-sort-header>
                {{column.value}}
              </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="agentInfo"></mat-header-row>
            <mat-row *matRowDef="let row; columns: agentInfo;" [ngClass]="{ 'selected': selection.isSelected(row)}"
              (click)="selection.toggle(row)"></mat-row>
          </mat-table>
          <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        </div>
      </div>
      <div fxFlex="10" fxLayout="column" fxLayoutAlign="none" class="btn-action">
        <div>
          <button mat-mini-fab color="primary" class="mat-elevation-z4" (click)="showAddAgent()">
            <mat-icon class="icon">add</mat-icon>
          </button>
        </div>
        <div>
          <button mat-mini-fab color="primary" class="mat-elevation-z4" (click)="showEditAgent()">
            <mat-icon class="icon">create</mat-icon>
          </button>
        </div>
        <div>
          <button mat-mini-fab color="accent" class="mat-elevation-z4" (click)="showDeleteAgent()">
            <mat-icon class="icon">delete</mat-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
</standard-page>

agentsmanagement.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  MatTableDataSource, MatSort,
  MatDialog, MatDialogRef,
  MatSnackBar, MatPaginator,
  Sort
} from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { PopupAgentComponent } from "../dialogs/popup-agent/popup-agent.component";

@Component({
  selector: 'app-agentsmanagement',
  templateUrl: './agentsmanagement.component.html',
  styleUrls: ['./agentsmanagement.component.css']
})
export class AgentsmanagementComponent implements OnInit {
  tableArr: Element[] = [{ Code: 123153325, AgentName: 'Jun Mar', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun@gmail.com' },
  { Code: 123153325, AgentName: 'Jay Jay', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun@gmail.com' },
  { Code: 123153325, AgentName: 'Paano Mo Nasabi', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: '' },
  { Code: 123153325, AgentName: 'Walang Poreber', AgentType: 'Cooperate', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun@gmail.com' },
  { Code: 123153325, AgentName: 'Polano Decaprio', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun@gmail.com' },
  { Code: 123153325, AgentName: 'Pedodido Tak', AgentType: 'Individual', Contact: '09324383919', Address: 'Kasambagan, Cebu', Email: 'Jun@gmail.com' }
  ];
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  dialogRef: MatDialogRef<PopupAgentComponent>;
  data = Object.assign(this.tableArr);
  selection = new SelectionModel<Element>(false, null);
  agentInfo = [];
  dataSource = new MatTableDataSource<Element>(this.tableArr);
  columnNames = [{
    id: "Code",
    value: "Code"
  }, {
    id: "AgentName",
    value: "Agent Name"
  },
  {
    id: "AgentType",
    value: "Agent Type"
  },
  {
    id: "Contact",
    value: "Contact"
  },
  {
    id: "Address",
    value: "Address"
  },
  {
    id: "Email",
    value: "Email"
  }];

  constructor(
    public dialog: MatDialog,
    public snackBar: MatSnackBar,
  ) {
  }

  ngOnInit() {
    this.agentInfo = this.columnNames.map(x => x.id);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }

  showAddAgent() {
    this.dialogRef = this.dialog.open(PopupAgentComponent, {
      disableClose: true,
      width: '680px',
      height: '580px'
    });
  }
  showEditAgent() {
    if (this.selection.isEmpty()) {
      this.openSnackBar("Please select one Agent to Update", "");
    } else
      this.dialogRef = this.dialog.open(PopupAgentComponent, {
        disableClose: true,
        width: '680px',
        height: '580px'
      });
  }
  showDeleteAgent() {
    if (this.selection.isEmpty()) {
      this.openSnackBar("Please select one Agent to Delete", "");
    } else {
      this.selection.selected.forEach(item => {
        let index: number = this.data.findIndex(d => d === item);
        this.dataSource.data.splice(index, 1);
        this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
      });
      this.selection = new SelectionModel<Element>(true, []);
    }
  }
}

export interface Element {
  Code: number,
  AgentName: string,
  AgentType: string,
  Contact: string,
  Address: string,
  Email: string
}

我的SnackBar有什么问题？我已经尝试修复它，但是没有用。我尝试查看控制台，但没有错误。

我希望它看起来像Angular Material文档中的示例：

SnackBar with proper height