* ngIf else ifテンプレート内


100

*ngIfステートメントで複数のケースをどのように持つのですか?私は持ってVueのか、角度1に慣れてifelse ifelse、それだけで持っている角度4のように思えるtrueif)とfalseelse)の条件を。

ドキュメントによると、私はできるだけです:

  <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ではサポートされていないようです。


私はあなたがハックするのが最も読みやすいので最良の解決策だと思っていました。ただし、角度切り替えステートメントでは複数の条件を照合できるため、真のelseifロジックが得られないことに気付きました。
Tom Benyon、

回答:


143

別の選択肢は、条件をネストすることです

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

4
これは私にとってより良い解決策でした。私の条件は複数の変数に基づいており、複数の変数が同時に真である可能性がありました。
Matt DeKok 2017年

1
次のように使用できない<ng-template #second *ngIf="foo === 2;else third">
Loki

賢い。フレームワークtbhに導入する必要があります
ポグリンディス

36

あなたはただ使うことができます:

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

ng-containerの部分が私が思うあなたのデザインにとって重要でない限り。

これがプランカーです


1
私の例は少し単純化していますが、少し面倒でエラーが発生しやすいif (index === 1) else if (foo === 2)ように記述しなければならないような「else if」動作をif (index === 1) if (index !== 1 && foo === 2)想定しているため、逆のロジックを記述する回数が増えます。

プランカーを見たことがありますか?問題はないと思います。インデックスは一度に1つだけです。
ディラン

:私はそれが説明を欠けている私の例ですが、ここでのJSの例だと思う if (item === 'food' && kind === 'hamburger') {} else if (item === 'food' && kind === 'hotdog') {} else if (item === 'drink' && kind === 'beer') {} else if (item === 'drink' && kind === 'wine') {} else { /* could be poisonous */ }

1
その例ではまだ相互排除が多すぎますが、重要なのは、大量の冗長ロジックを記述せずにif if else elseでなくif if elseでなくてはならないことです。Angular 4のテンプレートにはこの種のロジックがないようです。

1
他にもいくつかのオプションがあります。これは、NgTemplateOutlet* ngTemplateOutlet = "drink; context:beer"のようなwithコンテキスト、または分類のための別のコンポーネントから利益を得る可能性があるようです 。
ディラン

26

これは最もクリーンな方法のようです

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

テンプレート内:

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

適切なステートメントのよう機能することに注意してくださいelse if条件に異なる変数が含ま場合は(一度に1つのケースのみが真です)。他の回答のいくつかは、そのような場合に正しく機能しません。

余談ですが、それは本当に醜いelse ifテンプレートコードです...


17

シチュエーションに基づいて複数の方法を使用できます。

  1. Variableが特定のNumberまたはStringに制限されている場合、最善の方法はngSwitchまたはngIfを使用することです。

    <!-- foo = 3 -->
    <div [ngSwitch]="foo">
        <div *ngSwitchCase="1">First Number</div>
        <div *ngSwitchCase="2">Second Number</div>
        <div *ngSwitchCase="3">Third Number</div>
        <div *ngSwitchDefault>Other Number</div>
    </div>
    
    <!-- foo = 3 -->
    <ng-template [ngIf]="foo === 1">First Number</ng-template>
    <ng-template [ngIf]="foo === 2">Second Number</ng-template>
    <ng-template [ngIf]="foo === 3">Third Number</ng-template>
    
    
    <!-- foo = 'David' -->
    <div [ngSwitch]="foo">
        <div *ngSwitchCase="'Daniel'">Daniel String</div>
        <div *ngSwitchCase="'David'">David String</div>
        <div *ngSwitchCase="'Alex'">Alex String</div>
        <div *ngSwitchDefault>Other String</div>
    </div>
    
    <!-- foo = 'David' -->
    <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
    <ng-template [ngIf]="foo === 'David'">David String</ng-template>
    <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
    
  2. 上記のif elseif elseコードと動的コードには適していませんが、以下のコードを使用できます。

    <!-- foo = 5 -->
    <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
    <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
    <ng-container *ngIf="foo >= 7; then t7"></ng-container>
    
    <!-- If Statement -->
    <ng-template #t13>
        Template for foo between 1 and 3
    </ng-template>
    <!-- If Else Statement -->
    <ng-template #t46>
        Template for foo between 4 and 6
    </ng-template>
    <!-- Else Statement -->
    <ng-template #t7>
        Template for foo greater than 7
    </ng-template>
    

注:任意の形式を選択できますが、すべてのコードに独自の問題があることに注意してください


1
IMO 2. *ngIf="foo >= 7; then t7"ではなくをお読みください... else t7
hgoebl 2018

2行目が2行あるだけでfoo >= 4 && foo <= 6; then t46; else t7うまくいくと思います。
クラウド

4

ネストとngSwitchを回避するために、Javascriptで論理演算子が機能する方法を活用するこの可能性もあります。

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

2

または、3項演算子で条件付きチェーンを使用するだけかもしれません。if … else if … else if … else鎖。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

このアプローチの方が好きです。


0

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

Angularは、ngIf、ngFor、ngSwitchなど、私たちがいつも使用している構造ディレクティブの多くで、内部ですでにng-templateを使用しています。

> Angularのng-templateとは

https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/


0

また、この古いトリックを使用して、複雑なif / then / elseブロックをややクリーンなswitchステートメントに変換することもできます。

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.