Angular 6 fxflex不适用于ngif div（如果显示div，则fxflex未应用于其上）

我试图在angular 6中使用fxFlex属性和ngIf，但是，它的行为非常奇怪&没有给出预期的输出

我希望它看起来

在该演示中，在前两个输入中，我尝试了两种方法将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>

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

它在没有ngIf的情况下正常工作，给出了预期的尺寸和间距：

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

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

---

有人能解释为什么fxFlex不能像预期的那样使用ngIf吗？

这里的问题不是*ngIf

问题来自您的mat form字段

对于您的div，mat form字段没有获得宽度：100%

此代码适用于：

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

---

非常感谢，这就是问题所在，您的解决方案非常有效！