Question

当我在使用ngIf创建的列表周围包裹ngFor容器时，我在Angular2中遇到了一些意外行为。看起来好像在ngIf容器变为可见之后，第一次插入视图时，视图不会在可观察数组中呈现项目。

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

我做的是蠢事还是渲染错误？

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': '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

ngIf容器打破异步ngFor

1 个答案: