angular 2 * ngPer, quando l'iterabile non è stato ancora istanziato

Question

Ho un paio di cicli * ngFor a seconda degli iterabili che potrebbero non essere ancora istanziati. (per esempio stanno aspettando un osservabile)

c'è qualche espressione come questa che potrei usare nella vista?

UPDATE: Ecco il thats parte errore

gettando

Componente

activeLectureContent:LectureContent; 

View

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

Impossibile leggere proprietà 'content' di indefinito in [null]

Lecture Content sembra questo

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

applausi

Answer 1

Se è "semplicemente" un iterabile (array, ... ma non osservabile, promessa), penso che non ci sia nulla da fare. ngFor controllerà gli aggiornamenti del iterabile. Quando il valore diventerà non nullo, ngFor aggiornerà il contenuto corrispondente:

Vedi questo esempio:

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

Vedere questo plunkr: https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview.

Con beta 17, è necessario sostituire # da let:

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

Non sembra bene che ngIf con ngFor opere. Vedi thisp plunkr: https://plnkr.co/edit/aE3umzzSZ5U9BocEE9l6?p=preview

Se "iterable" è un osservabile o una promessa, que la pipe async.

Modifica

Si potrebbe provare qualcosa di simile:

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

Io uso la sintassi estesa per ngIf dal ngFor e ngIf non possono essere utilizzati sullo stesso elemento.

Answer 2

Si potrebbe usare una direttiva ngIf, quindi è resa solo se iterable è thruthy.

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

Answer 3

Stai cercando AsyncPipe:

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

Funziona con osservabili, Promesse e EventEmitters. È possibile ottenere ulteriori informazioni su di esso nel guide (capitolo "L'impuro AsyncPipe") e documentation.

Answer 4

Resuscitare questo post come ho avuto di recente questa stessa domanda.

Questa è una custodia perfetta per Angular (safe navigation operator).

Dalla documentazione: (?.)

L'angolare operatore di navigazione sicura è un modo fluente e conveniente per evitare valori nulli e non definiti nei percorsi di proprietà.

Così la vista ad esempio dalla domanda sarebbe:

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

Aggiunta del? dopo activeLectureContent significa che ngFor verrà ignorato se activeLectureContent è nullo o indefinito.