如何在标签内的同一个 *ngIf 上设置多个条件？答案

【问题标题】：How can I set multiple conditions on the same *ngIf within a tag?如何在标签内的同一个 *ngIf 上设置多个条件？
【发布时间】：2021-03-31 16:11:48
【问题描述】：

我有一个form，在角度材料中有多个字段。在一个字段中，我需要建立一个条件，如果用户是“admin”，它占据表的 2 列，如果不是，它占据 3 列。

这是我当前的代码：

<mat-grid-tile [colspan]="3">
     <div fxFlex>
          <date fxFlex title="Fecha inicio" [monthInput]="true" formControlName="date"></date>
     </div>
</mat-grid-tile>

这是我正在测试的代码，但我无法让它工作：

<mat-grid-tile *ngIf="is_admin; then [colspan]="2"; else [colspan]="3"">
     <div fxFlex>
          <date fxFlex title="Fecha inicio" [monthInput]="true" formControlName="date"></date>
     </div>
</mat-grid-tile>

如何设置标签内的条件以使其适合列？

【问题讨论】：

标签： angular angular-material angular-ng-if

【解决方案1】：

[colspan]="is_admin ? 2 : 3"

【讨论】：

【解决方案2】：

您不应为此使用*ngIf，因为*ngIf 控制元素是否可见。

您可以在属性绑定中使用表达式：

<mat-grid-tile [colspan]="is_admin ? 2 : 3">
     <div fxFlex>
          <date fxFlex title="Fecha inicio" [monthInput]="true" formControlName="date"></date>
     </div>
</mat-grid-tile>

您可以找到有关 Angular 绑定语法here的更多信息

【讨论】：

【解决方案3】：

您可以使用两种方法解决：

使用属性绑定

<mat-grid-tile [colspan]="is_admin ? 2 : 3">
     <div fxFlex>
          <date fxFlex title="Fecha inicio" [monthInput]="true" formControlName="date"></date>
     </div>
</mat-grid-tile>

或者，如果你仍然对*ngIf感兴趣

<mat-grid-tile *ngIf="is_admin else not_admin" [colspan]="2">
     <div fxFlex>
          <date fxFlex title="Fecha inicio" [monthInput]="true" formControlName="date"></date>
     </div>
</mat-grid-tile>

<ng-template #not_admin>
 <mat-grid-tile [colspan]="3">
     <div fxFlex>
          <date fxFlex title="Fecha inicio" [monthInput]="true" formControlName="date"></date>
     </div>
 </mat-grid-tile>
</ng-template>

【讨论】：

【解决方案4】：

[colSpan]="is_admin ? 2 : 3"

或

colSpan="{{ is_admin ? 2 : 3 }}"

任何一个都可以正常工作。但是 top 方法更受欢迎，因为它也易于阅读！

【讨论】：

【解决方案5】：

*ngIf="is_admin; then [colspan]="2"; else [colspan]="3""
                                   ^
                                   |

只需删除这个分号？

【讨论】：