NgIf container breaks asynchronous

Question

I experience some unexpected behavior in Angular2 when I wrap a container ngIfaround a list created with ngFor. It appears that the representation does not display the array elements in the observed during the initial start after the container ngIfbecomes visible.

Refer to the plunker demo that demonstrates this unexpected behavior. I expect the banana to appear in the first example, while Loaded will appear at the same time.

Am I doing something stupid or is this a rendering error?

---

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': 'banana'},
        {'id': 2, '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);
      });
  }
}

Answer 1

Subject async . Subject BehaviorSubject, .

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

Subject BehaviorSubject: BehaviorSubject , , , Subject . , ngIf, DOM, subscribe. Subject , , .

plnkr: https://plnkr.co/edit/Obso0Odl3PoPw699AQ5W?p=preview