Angular Flex：使用带有网格选项的fxLayoutGap时，mat-dialog-content的高度不正确

Question

当我创建一个包含要用fxLayoutGap和grid选项显示的内容的模式窗口时，对话框内容区域的高度计算不正确。不但没有放大对话框，反而发生溢出。

StackBlitz:https://stackblitz.com/edit/Angular-Material-JROR5H

模态组件的代码：

  <mat-dialog-content class="mat-typography">
    <div fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="20px grid">
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 1</mat-label>
          <input matInput placeholder="FormControl 1" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="66.7">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 2</mat-label>
          <input matInput placeholder="FormControl 2" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 3</mat-label>
          <mat-select>
            <mat-option [value]="true">yes</mat-option>
            <mat-option [value]="false">no</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 4</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="33.3">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 4</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="50">
        <mat-form-field appearance="outline" style="width: 100%">
          <mat-label>FormControl 5</mat-label>
          <input matInput placeholder="FormControl 5" type="text">
        </mat-form-field>
      </div>
      <div fxFlex="50">
        <mat-form-field appearance="outline">
          <mat-label>FormControl 6</mat-label>
          <input matInput placeholder="FormControl 4" type="text">
        </mat-form-field>
      </div>
    </div>
  </mat-dialog-content>

Answer 1

您可以在从对话框配置打开模式之前设置模式的高度：

openModal() {
    this.dialog.open(ModalComponent, {
      height: '400px'
    });
  }

在表单中包含mat-dialog-content，这是错误的。

mat-dialog-content是您的模态内容的父项，而mat-dialog-actions可以用作此内容的页脚

Answer 2

使用fxFlexFill指令获得正确的高度

<div fxLayout="row wrap" fxFlexFill fxLayoutAlign="start start" fxLayoutGap="20px grid">