javascript - 间隔时不循环

Question

我有一些如下所示的 html:

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

然后我想每秒填充一次列表，所以我有这样的东西:

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

我知道看看这个看起来为什么你运行的时间间隔值是相同的。我的代码中有其他逻辑，其中有 if 和 else 语句会打破间隔，但我根本没有显示任何项目，这是我担心的。我希望这 9 个项目出现在我的 html 页面上的列表中，但没有一个显示。如果我删除间隔，则会显示项目。那么，如果它在不显示的区间内，我怎样才能使它如此呢？我不确定这个问题。

Answer 1

解决此问题的更“Angular 2 方式”是使用 AsyncPipe与 Observable 和 Observable.timer 运算符结合使用:

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

}