Angular 4中还有别的吗

Question

<ng-template [ngIf]="xyz== 1">First</ng-template>
<ng-template [ngIf]="pqr == 2">Second</ng-template>
<ng-template [ngIf]="abc == 3">Third</ng-template>

如果为false，则检查第二次，依此类推

如何做到这一点？

Answer 1

您可以尝试使用ngif指令，如下所示：

<ng-template [ngIf]="xyz == 1" [ngIfElse]="second">First</ng-template>
<ng-template #second>
  <ng-template [ngIf]="pqr == 2" [ngIfElse]="third">Second</ng-template>
</ng-template>
<ng-template #third>
  <ng-template [ngIf]="abc == 3">Third</ng-template>
</ng-template>

对于ng-container，它将如下所示：

<ng-container *ngIf="xyz == 1; else second">First</ng-container>
<ng-template #second>
    <ng-container *ngIf="pqr == 2; else third">Second</ng-container>
</ng-template>
<ng-template #third>
    <ng-container *ngIf="abc == 3">Third</ng-container>
</ng-template>

但是如果您想使用for loop语句，我可以提供以下解决方案：

<ng-container *ngTemplateOutlet="next; context: { $implicit: 0 }"></ng-container>

<ng-template #next let-i>
  <ng-container *ngIf="conditions[i]">
    <ng-container *ngIf="conditions[i] && conditions[i].condition(); else shift">{{ conditions[i].result }}</ng-container>
      <ng-template #shift >
        <ng-container *ngTemplateOutlet="next; context: { $implicit: i + 1 }"></ng-container>
      </ng-template>
  </ng-container>
</ng-template>

conditions = [
  {
    condition: () => this.xyz === 1,
    result: 'First'
  },
  {
    condition: () => this.pqr === 2,
    result: 'Second'
  },
  {
    condition: () => this.abc === 3,
    result: 'Third'
  }
];