Angular 6 fxflex 不适用于 ngif div（如果显示 div fxflex 未应用于它）

Question

我正在尝试将 fxFlex 属性与 angular 6 中的 ngIf 一起使用，但是，它的行为非常奇怪并且没有给出预期的输出。

Here is a link to a demo showing the issue on stackblitz

我希望它看起来像 like this when it works correctly

在该演示中，在前两个输入中，我尝试了两种将 fxflex 放在输入上的方法，但它对这两个输入的作用都很奇怪，如果我将 fxFlex 放在 ngIf div 上，它会出错尺寸和间距：

<div *ngIf="true" fxFlex = "20">
      <mat-form-field >
        <input matInput name="dependentRelationship" placeholder="Relationship" [(ngModel)]="data.dependentRelationship"
          required>
      </mat-form-field>
</div>

它在没有 ngIf 的情况下也能正常工作，给出预期的大小和间距：

  <mat-form-field fxFlex = "20">
    <input matInput name="dependentRelationship" placeholder="Relationship" [(ngModel)]="data.dependentRelationship"
      required>
  </mat-form-field>

有人可以说明为什么 fxFlex 没有按预期使用 ngIf 工作吗？

Answer 1

*ngIf 不是这里的问题。

问题出在你的 mat-form-field 上。

使用你的 div，mat-form-field 没有得到 width:100%

此代码有效：

<div fxFlex = "20">
   <mat-form-field fxFlex="100">
        <input matInput name="dependentRelationship" placeholder="Relationship" [(ngModel)]="data.dependentRelationship"
          required>
      </mat-form-field>
</div>

Angular 6 fxflex 不适用于 ngif div（如果显示 div fxflex 未应用于它）

Angular 6 fxflex not working with ngif div (if div is shown fxflex is not applied on it)

flexbox

angular-material2

angular

angular6