angular 2 * ngFor iterableがまだインスタンス化されていない場合

Question

インスタンス化されていない可能性のあるiterablesに応じて、* ngForループが2つあります。 （例えば、彼らが観測可能なのを待っている）

ビューに使用できるこのような表現はありますか？

UPDATE：ここ は

<div class="filter-units"> 
    <div>Units</div> 
    <a (click)="setUnit(i)" class="btn btn-icon-only blue filter-unit-btn" *ngFor="#unit of activeLectureContent.content; #i = index"> 
     <span>{{i+1}}</span> 
    </a> 
    </div> 

エラー

コンポーネント

activeLectureContent:LectureContent; 

ビューは[ヌル]で

を未定義のプロパティ '内容' を読み込めません投げthatsの一部です

講義内容はiterableがthruthyある場合にのみレンダリングされるようにするには、ngIfディレクティブを使用することができ、この

export class LectureContent{ 
    constructor(
    public name:string = '', 
    public filter:LectureFilter[]=[], 
    public show:boolean = true, 
    public hover:boolean = false, 
    public content:any[]=[] 
){} 
} 

歓声

Answer 1

"単純に"反復可能である（配列、...しかし、観測可能ではない、約束）なら、私は何もしないと思う。 ngForは、反復可能性の更新をチェックします。値がnullではないになります場合は、ngForは、対応するコンテンツを更新します。

このサンプルを参照してください：https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview：

@Component({ 
    selector: 'app' 
    template: ` 
    <div> 
     <div *ngFor="#category of categories;#i=index">{{i}} - {{category.name}}</div> 
    </div> 
    ` 
}) 
export class App { 
    constructor() { 
    Observable.create((observer) => { 
     setTimeout(() => { 
     observer.next(); 
     }, 2000); 
    }).subscribe(() => { 
     this.categories = [ 
     { name: 'Cat1', value: 'cat1' }, 
     { name: 'Cat2', value: 'cat2' }, 
     { name: 'Cat3', value: 'cat3' }, 
     { name: 'Cat4', value: 'cat4' } 
     ]; 
    }); 
    } 
} 

このplunkrを参照してください。ベータ17で

、あなたはletで#を交換する必要があります。

<div *ngFor="let category of categories;let i=index">{{i}} - (...) 

ngForとngIfがうまく機能していることは思えません。 this is plunkr：https://plnkr.co/edit/aE3umzzSZ5U9BocEE9l6?p=preview

"iterable"が観測可能または約束の場合は、非同期パイプをキューに入れます。

編集

あなたはそのような何かを試みることができる：

<template [ngIf]=" activeLectureContent "> 
    <a (click)="setUnit(i)" class="btn btn-icon-only blue filter-unit-btn" *ngFor="#unit of activeLectureContent.content; #i = index"> 
     <span>{{i+1}}</span> 
    </a> 
</template> 

ngForとngIfは同じ要素で使用することはできませんので、私はngIfための拡張構文を使用します。

Answer 2

のように見えます。

<div *ngIf="iterable" *ngFor="let item of iterable"><div> 

Answer 3

あなたはAsyncPipeを探しています：

<div *ngFor="#item of iterable | async"></div> 

それは観測、約束と持つEventEmitterで動作します。 guide（章「The impure AsyncPipe」）とdocumentationに詳しい情報が記載されています。

Answer 4

私は最近この同じ質問を持っていたので、このポストを復活させてください。

これはAngular's（safe navigation operator）に最適です。ドキュメントから

：（？）

角度安全運航事業者は、プロパティパスでnullとundefined値を防ぐため、流暢かつ便利な方法です。

そこで質問の例ビューは次のようになります。

<div class="filter-units"> 
    <div>Units</div> 
    <a (click)="setUnit(i)" class="btn btn-icon-only blue filter-unit-btn" 
     *ngFor="let unit of activeLectureContent?.content; let i = index"> 
     <span>{{i+1}}</span> 
    </a> 
    </div> 

が追加？ activeLectureContentがnullまたは未定義の場合、ngForは無視されます。