5

まだインスタンス化されていない可能性のあるイテラブルに応じて、いくつかの *ngFor ループがあります。(例えば、彼らは観測可能なものを待っています)

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

更新：エラーをスローしている部分は次のとおりです

成分

activeLectureContent:LectureContent;

意見

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

[null] で未定義のプロパティ 'content' を読み取れません

講義内容はこんな感じ

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

乾杯

4

4 に答える 4

3

それが「単に」イテラブル（配列、...しかし観察可能ではない、約束）である場合、私は何もすることがないと思います。ngForイテラブルの更新をチェックします。値が null 以外にngForなると、対応するコンテンツが更新されます。

このサンプルを参照してください。

@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 を参照してください: https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview。

beta 17 では、次のように置き換える必要があり#ますlet。

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

ngIfwithngForがうまく機能していないようです。このp 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 の拡張構文を使用します。

于 2016-04-30T08:13:24.870 に答える
3

最近同じ質問があったので、この投稿を復活させます。

これは、Angular の (安全なナビゲーション オペレーター) の完璧なケースです。

ドキュメントから：

Angular のセーフ ナビゲーション演算子 (?.) は、プロパティ パス内の null 値や未定義の値から保護する流暢で便利な方法です。

したがって、質問からのビューの例は次のようになります。

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

? の追加 after activeLectureContent は、activeLectureContent が null または未定義の場合、ngFor が無視されることを意味します。

于 2017-05-31T21:21:40.050 に答える
1

AsyncPipe を探しています:

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

Observables、Promises、および EventEmitters で動作します。詳細については、ガイド(「不純な AsyncPipe」の章) とドキュメントを参照してください。

于 2016-04-29T22:19:10.617 に答える