angular – ngIf容器打破异步ngFor

当我在使用NgFor创建的列表周围包装ngIf容器时,我在Angular2中遇到了一些意外的行为.在NgIf容器变​​为可见之后,第一次插入时,视图似乎不会在可观察数组中呈现项目.

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

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

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);
      });
  }
}

private _things = new BehaviorSubject<Array<any>>();