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

Question

我在 angular 材料中有一个包含多个字段的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>

如何在 label 中设置条件以使其适合列？

Answer 1

您不应该为此使用*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 绑定语法的更多信息

Answer 2

[colspan]="is_admin ? 2 : 3"

Answer 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>

Answer 4

[colSpan]="is_admin ? 2 : 3"

或者

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

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

Answer 5

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

只需删除这个分号？