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语句将打破间隔，但我没有显示任何项目，这是我关心的问题。我希望我的html页面上的9个项目列在一个列表中，但是没有一个显示。如果我删除间隔，则显示项目。因此，如果它不在显示的区间内，我怎么能这样做呢？我不确定这个问题。

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

}

Answer 2

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

ChangeDefectorRef为我做了。在时间间隔内添加this.ref.markForCheck();会为我刷新项目，现在会显示。

在间隔时不循环

2 个答案: