web-dev-qa-db-ja.com

* ngIfがテンプレート内にある場合

*ngIfステートメントに複数のケースがあるのでしょうか。私はif、else if、およびelseを持つことでVueまたはAngular 1に慣れていますが、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ではサポートされていないようなので、構造化の推奨される方法は何でしょうか。このような条件で私のコード？

angulartemplatesangular-ng-ifngif
57
CmdrShepardsPie

もう1つの方法は条件を入れ子にすることです

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

あなただけを使用することができます：

<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の部分があなたのデザインにとって重要でない限り私は思います。

これが Plunkerです

28
Dylan

これが最もきれいな方法のようです

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テンプレートコードです...

20
goat

状況に基づいて複数の方法を使用できます。

  1. 変数が特定の数値または文字列に制限されている場合、最善の方法は次のとおりです。 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. 上記の場合elseifその他コードおよび動的コードには適していません。以下のコードを使用できます。

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

注意：あなたはどんなフォーマットを選択することもできますが、すべてのコードがそれ自身の問題を抱えていることに注意してください

13
Sina Lotfi