web-dev-qa-db-ja.com

If = Angular 4

たくさんの声明があります

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

上記のステートメントの複数の条件が当てはまる場合があります。

しかし、私が欲しいのは、最初にtrueの場合は最初のステートメントをチェックしてから、残りを表示して残すことです

Falseの場合、2番目などを確認します

これを達成する方法は？

angularangular-ng-if
13
Ankit Raonka

次のような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>

しかし、ループ文を使用したい場合、私は次の解決策を提供できます：

<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

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

プランカーの例

7
yurzui

現在、elseifはサポートされていません

Ngifelse https://angular.io/api/common/NgIf

2
piyush gupta

コンポーネントでさらに多くの作業をしないのはなぜですか。

<ng-template [ngIf]="status == 'first'">First</ng-template>
<ng-template [ngIf]="status == 'second'">Second</ng-template>
<ng-template [ngIf]="status == 'third'">Third</ng-template>

コンポーネントコード内：

status string;
if (xyz == 1)
   status = 'first';
else if (pqr == 2)
   status = 'second';
else if (abc == 3)
   status = 'third';
1
Dean Chalk