Question

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

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无法获得宽度：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不会应用在其上）

1 个答案: