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

Question

我有一个 form，在 angular material 中有多个字段。在一个字段中，我需要建立一个条件，如果用户是“admin”，它占据 table 的 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>

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

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 的绑定语法的更多信息 here

Answer 2

[colspan]="is_admin ? 2 : 3"

Answer 3

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

简单地去掉这个分号？

Answer 4

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

使用属性绑定

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

[colSpan]="is_admin ? 2 : 3"

或

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

两者都可以。但 top 方法更受欢迎，因为它也易于阅读！

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

How can I set multiple conditions on the same *ngIf within a tag?

angular

angular-material

angular-ng-if