Angular4以降のngIfの新機能

Angular 4はわずか数日で到着する予定であり、組み込みのngIfテンプレートディレクティブに優れた追加機能があります。 つまり、else句に使用するテンプレートを定義し、if句の結果の値を保持するローカル変数を割り当てることができます。

ngIfでこれら2つの新機能を使用する方法は次のとおりです。

その他の条項

したがって、以前は、 ngIf ステートメントの一部としてelse句を使用するには、代わりに、最初のステートメントを否定して別のngIfステートメントを作成する必要がありました。

<div *ngIf="likeThis">
  Like this!
</div>
<div *ngIf="!likeThis">
  Like that!
</div>

しかし、これで、ng-templateで定義したテンプレートの参照名を使用してelse句を定義できます。

<div *ngIf="things.car; else noCar">
  Nice car!
</div>
<ng-template #noCar>
  Call a Uber.
</ng-template>

ローカル変数の割り当て

多くの場合、ifステートメントの結果の値は、ブール値のtrueまたはfalseだけでなく、簡単に参照できる値になります。 新しいngIfを使用すると、ifステートメントの結果をローカル変数に簡単に割り当てることができます。 たとえば、 things オブジェクトは、コンポーネントクラスでは次のようになります。

things = {
  car: 'Honda',
  shoes: 'Nike',
  shirt: 'Tom Ford',
  watch: 'Timex'
};

そして、次のようにifステートメントの結果を参照できます。

<div *ngIf="things.car; let car">
  Nice {{ car }}!
</div>
<!-- Nice Honda! -->

もちろん、else句とローカル変数の割り当ての両方を組み合わせることができます。

<div *ngIf="things.car; else noCar; let car">
  Nice {{ car }}!
</div>
<ng-template #noCar>
  Call a Uber.
</ng-template>

非同期パイプを使用するngIf

Angular Universityのこの投稿で説明されているように、 ngIf ディレクティブの新機能は、非同期パイプと組み合わせて使用すると非常に強力になります。

たとえば、 async パイプを使用して、オブザーバブルを自動的にサブスクライブし、else句を使用してロードテンプレートを定義し、オブザーバブルからの結果の値をローカル変数に配置できます。

説明のために簡単なオブザーバブルを作成しましょう。

// ...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

// ...
export class AppComponent {
  things$ = Observable.of({
    car: 'Honda',
    shoes: 'Nike',
    shirt: 'Tom Ford',
    watch: 'Timex'
  }).delay(1000);
}

オブザーバブルは、データを送信する前に1秒間待機することで、ネットワーク呼び出しを模倣します。

これで、 async パイプを使用して、 things $ observableをサブスクライブし、読み込みメッセージのテンプレートを使用してelse句を定義し、ローカル変数を宣言できます。オブザーバブルがデータを取得したらアクセスするには：

<div *ngIf="things$ | async; else loading; let things">
  Nice {{ things.watch }}! <!-- Nice Timex! -->
</div>
<ng-template #loading>
  Loading your things...
</ng-template>