1. ホーム
  2. angular

[解決済み] テンプレート内の *ngIf else if

2022-04-24 07:17:28

質問

の中に複数のケースを持つにはどうしたらよいでしょうか? *ngIf ステートメントを使用します。私はVueやAngular 1で if , else if および else が、Angular 4では true ( if ) と false ( else ) 条件を満たしている。

ドキュメントによると、私は唯一の行うことができます。

<ng-container *ngIf="foo === 1; then first else second"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

しかし、複数の条件(のようなもの)を持ちたいのです。

<ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

しかし、私は結局のところ ngSwitch というのは、ハックされたような感じがします。

<ng-container [ngSwitch]="true">
  <div *ngSwitchCase="foo === 1">First</div>
  <div *ngSwitchCase="bar === 2">Second</div>
  <div *ngSwitchDefault>Third</div>
</ng-container>

また、Angular 1やVueで慣れた構文の多くがAngular 4ではサポートされていないようなので、このように条件を指定してコードを構成するにはどのような方法が推奨されますか?

どのように解決するのですか?

もう一つの方法は、条件をネストすることです。

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>