Angular 9 中的条件绑定属性 fxFlex答案

【问题标题】：Conditional bind property fxFlex in Angular 9Angular 9 中的条件绑定属性 fxFlex
【发布时间】：2020-08-16 18:40:36
【问题描述】：

我正在使用完美运行的 Angular flexlayout，我正在尝试将 fxFlex 绑定到子元素，如下所示

<div [fxLayout]="fields.layoutConfig.fxLayout + ' wrap'" fxLayoutGap="10px">
    <div *ngFor="let field of fields.componentConfig;" [fxFlex]="field?.componentProperty?.fxFlexChildLayout?.fxFlex">
        <ng-container reactiveField [field]="field" [group]="form"></ng-container>
    </div>
</div>

当field?.componentProperty?.fxFlexChildLayout?.fxFlex 为空或未定义时，它不应将 fxFlex 绑定到 div

我试过了

[fxFlex]="field?.componentProperty?.fxFlexChildLayout?.fxFlex != undefined ? field?.componentProperty?.fxFlexChildLayout?.fxFlex : 'null'"

[attr.fxFlex]="field?.componentProperty?.fxFlexChildLayout?.fxFlex" --> this does nothing it doesn't bind `fxFlex` when it has value as well

但仍然在 DOM 中，我可以看到它添加样式为

style="flex: 1 1 100%; box-sizing: border-box;"

如果field?.componentProperty?.fxFlexChildLayout?.fxFlex 的值未定义或为空，我不想添加样式

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html angular flexbox angular-flex-layout

【解决方案1】：

你只需要在你的 TS 中声明一个变量并赋值

HTML

<div fxFlex="{{fxflexwidth}}">

fxflexwidth: number = 50;

在你的函数中，当你需要改变属性时才返回：

this.fxflexwidth = 100;

【讨论】：

【解决方案2】：

这不是您要求的答案，但正如 @Randy 在他们的回答中所说，因为您不能有条件地应用指令，另一种解决方案是将“none”传递给 [fxFlex] 指令。

“无”应根据子元素的宽度和高度属性调整子元素的大小。它是完全不灵活的。它相对于弹性容器既不收缩也不增长。

这应该与删除 [fxFlex] 指令具有相同的效果，但是，DOM 元素上仍然会有一些 flex 样式。

<div [fxLayout]="fields.layoutConfig.fxLayout + ' wrap'" fxLayoutGap="10px">
    <div *ngFor="let field of fields.componentConfig;" [fxFlex]="field?.componentProperty?.fxFlexChildLayout?.fxFlex || 'none'">
        <ng-container reactiveField [field]="field" [group]="form"></ng-container>
    </div>
</div>

见https://github.com/angular/flex-layout/wiki/fxFlex-API#fxflex-options

【讨论】：

【解决方案3】：

您不能有条件地应用指令是问题所在。您可以动态设置指令输入的值，这就是您在上面所做的，但所有 div 都将具有 fxFlex 指令。

所以：

  <div [fxLayout]="fields.layoutConfig.fxLayout + ' wrap'" fxLayoutGap="10px">
  <ng-container *ngIf="field?.componentProperty?.fxFlexChildLayout?.fxFlex; else noFxFlex">
    <div *ngFor="let field of fields.componentConfig;" [fxFlex]="field?.componentProperty?.fxFlexChildLayout?.fxFlex">
      <ng-container reactiveField [field]="field" [group]="form"></ng-container>
    </div>
  </ng-container>
  <ng-template #noFxFlex>
    <div *ngFor="let field of fields.componentConfig;">
      <ng-container reactiveField [field]="field" [group]="form"></ng-container>
    </div>
  </ng-template>
</div>

【讨论】：