Looping nicht, wenn im Intervall

Question

ich einige html haben, die wie folgt aussieht:

  <li *ngFor="#item of items; #i=index" > 
      <h2>{{ item }}</h2> 
      </li> 

Ich möchte dann die Liste jede Sekunde bevölkern, so habe ich so etwas wie dieses:

let t=setInterval(() =>{ 
       this.items = ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9"]; 
      },1000); 

I Wissen Sie, wenn Sie das betrachten, sieht es so aus, als ob Sie ein Intervall laufen, der Wert ist derselbe. Ich habe eine andere Logik in meinem Code, die if und else-Anweisungen hat, die das Intervall unterbrechen, aber ich bekomme überhaupt keine Elemente angezeigt, und das ist meine Sorge. Ich erwarte, dass sich die 9 Elemente in einer Liste auf meiner HTML-Seite befinden, aber keine von ihnen wird angezeigt. Wenn ich das Intervall entferne, werden die Elemente angezeigt. Also, wenn es innerhalb des Intervalls ist, wird es nicht angezeigt. Wie kann ich es so machen, dass es funktioniert? Ich bin mir des Problems nicht sicher.

Answer 1

Eine "Angular 2-Wege" Tut dies zu nähern wäre AsyncPipe mit einer beobachtbaren in Verbindung zu verwenden, und der Observable.timer Betreiber:

@Component({ 
    selector: 'foo', 
    pipes: [AsyncPipe], //import this from angular2/common 
    template: ` 
    <ul> 
     <li *ngFor="#item of (items | async); #i=index" > 
     <h2>{{ item }}</h2> 
     </li> 
    </ul> 
    ` 
}) 
class YourComponent { 
    items: Observable<string[]>; 

    constructor(){ 
     this.items = Observable.timer(0, 1000) //emit after 0 ms, then every 1000ms 
           .map(()=>{ 
            //insert real business logic 
            return ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9"] 
           }) 
    } 

} 

Answer 2

https://angular.io/api/core/ChangeDetectorRef

ChangeDefectorRef hat es für mich. Hinzufügen von this.ref.markForCheck(); innerhalb des Intervalls aktualisiert die Elemente für mich und es wird jetzt angezeigt.