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)Angular 6 fxflex 不适用于 ngif div（如果显示 div，则 fxflex 不适用）
【发布时间】：2018-07-08 22:42:48
【问题描述】：

我正在尝试在 Angular 6 中将 fxFlex 属性与 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 吗？

【问题讨论】：

标签： angular flexbox angular-material2 angular6

【解决方案1】：

*ngIf 不是这里的问题。

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

使用您的 div，mat-form-field 无法获得宽度：100%

此代码有效：

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

【讨论】：

谢谢一百万，这就是问题所在，您的解决方案完美运行！