angular 2 * ngFür, wenn iterierbar noch nicht instanziiert wurde

Question

Ich habe ein paar * ngFor-Schleifen abhängig von iterables, die möglicherweise noch nicht instanziiert werden. (z. B. warten sie auf eine Observable)

Gibt es einen Ausdruck wie diesen könnte ich in der Ansicht verwenden?

UPDATE: Hier ist das, das ist Teil Fehler werfen

Komponente

activeLectureContent:LectureContent; 

Ansicht

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

Kann nicht Eigenschaft 'Inhalt' von undefined in [null]

lesen

Lecture Inhalt sieht wie folgt aus

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

prost

Answer 1

Wenn es "einfach" ein iterable (Array, ... aber nicht beobachtbar, Versprechen) ist, denke ich, dass es nichts zu tun gibt. ngFor sucht nach Aktualisierungen des iterablen. Wann wird der Wert nicht null wird, wird ngFor den entsprechenden Inhalt aktualisieren:

dieses Beispiel Siehe:

@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' } 
     ]; 
    }); 
    } 
} 

dieses plunkr Siehe: https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview.

Mit Beta 17, müssen Sie # von let ersetzen:

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

Es ist nicht, dass ngIf mit ngFor funktioniert gut scheint. Siehe thisp plunkr: https://plnkr.co/edit/aE3umzzSZ5U9BocEE9l6?p=preview

Wenn "iterable" ist eine beobachtbare oder ein Versprechen, que async pipe.

bearbeiten

Man könnte so etwas versuchen:

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

ich die erweiterte Syntax für ngIf seit ngFor und ngIf verwenden, können nicht auf demselben Element verwendet werden.

Answer 2

Sie eine ngIf Direktive verwenden könnte, so ist es nur gemacht, wenn iterable thruthy ist.

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

Answer 3

Sie suchen AsyncPipe:

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

Es arbeitet mit Observable, Versprechen und EventEmitters. Sie können weitere Informationen darüber in der guide (Kapitel "Die unreine AsyncPipe") und documentation erhalten.

Answer 4

Diesen Beitrag wiederbeleben, wie ich vor kurzem dieselbe Frage hatte.

Dies ist ein perfekter Fall für Angulars (safe navigation operator).

Aus der Dokumentation: (.) ​​

Der Angular sichere Navigation Operator ist eine fließend und bequeme Möglichkeit zum Schutz gegen null und undefinierte Werte in Immobilien Pfaden.

So das Beispiel Ansicht von der Frage wäre:

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

das Hinzufügen? activeLectureContent bedeutet, dass ngFor ignoriert wird, wenn activeLectureContent null oder nicht definiert ist.