angular – ngIf容器打破异步ngFor

请参阅演示此意外行为的plunker demo.我期待第一个例子在Loaded出现的同时显示香蕉.

我做了一些愚蠢的事情还是这个渲染错误？

Plunker demo

app.service.ts

export class AppService {
  private _things = new Subject<Array<any>>();
    public things = this._things.asObservable();

  constructor() {
    var that = this;

    // simulate ajax request
    setTimeout(function() {
      that._things.next([
          {'id': 1,'text': 'banana'}
        ]);
    },3000);

    setTimeout(function() {
      that._things.next([
        {'id': 1,'text': 'banana'},{'id': 2,'text': 'orange'}
      ]);
    },6000);

    setTimeout(function() {
      that._things.next([
        {'id': 1,'text': 'orange'},{'id': 3,'text': 'apple'}
      ]);
    },9000);
  }
}

app.ts

@Component({
  selector: 'my-app',template: `
    <h4>Does have *ngIf</h4>
    <div *ngIf="hasThings">
      Loaded
      <ul>
        <li *ngFor="let thing of things | async">
          {{thing.id}}: {{thing.text}}
        </li>
      </ul>
    </div>

    <h4>Doesn't have *ngIf</h4>
    <div>
      Loaded
      <ul>
        <li *ngFor="let thing of things | async">
          {{thing.id}}: {{thing.text}}
        </li>
      </ul>
    </div>
  `,directives: [NgClass,NgStyle,CORE_DIRECTIVES,FORM_DIRECTIVES]
})
export class App implements OnInit {
  public hasThings = false;

  private _things = new Subject<Array<any>>();
  public things = this._things.asObservable();

  constructor(private _appService: AppService) {
  }

  ngOnInit() {
    this._appService.things
      .subscribe(things => {
        this.hasThings = things.length > 0;
        this._things.next(things);
      });
  }
}