Angular 2. 如何理解 Angular 在输入数据发生变化后完成渲染？

Question

我有一个组件，我们称之为UserComponent。该组件包含用于显示数据的网格组件。每行的单元格中都有按钮，删除、编辑、图表等。这是该组件的简化 html 模板：

<div>
   ...grid component goes here
   ... and other stuff
   <app-edit-user-graph [user]="selectedUser" [department]="department" [organization]="organization"></app-edit-user-graph>
</div>

当用户点击单元格内的Graph 按钮时，我会处理它： this.selectedUser = this.tableApi.row($tr).data(); 而且，如您所见，selecedUser 被传递给另一个组件，即app-edit-user-graph。

这个组件是模态窗口，有很多选择组件和其他控件。这是其模板的一部分：

<th *ngFor="let name of heads">
   <div>
      <span>{{name}}</span>
      <span>
      <ng-select [items]="userProjects" 
         [allowClear]="true"
         (data)="update($event, name)"          
         [active]="setActive(name)">
      </ng-select>
      </span>
   </div>
</th> 

我监听app-edit-user-graph 组件的变化：

@ViewChildren(SelectComponent)
selects: SelectComponent[];

@Input() user: User;
... other inputs

ngOnChanges(changes) {
   if (!changes.user || (changes.user && !changes.user.currentValue.id)) {
      return;
   }

   this.userService.getUserProjects(this.user.id).subscribe(p=> {
      this.userProjects = p;
      this.updateSelects();
   } 

} 

public updateSelects() {
    let rowSelects = this.selects;
    let selectedValues = this.getSelectedValue(rowSelects);
    let availableValues = this.getAvailableValues(selectedValues, this.userProjects);

    rowSelects.forEach(s => {
            s.items = availableValues;
    })
}

方法this.updateSelects 获取所有选择组件并过滤一些值。 问题如下。当我第一次单击时，updateSelects 方法中的selects 为空。我明白为什么，因为 Angular 还没有完成渲染选择。当我再次打开模式时，对于其他记录，我会得到上一组选择。

那么，问题来了，如何理解 Angular 在输入数据发生变化后完成渲染？

Answer 1

此代码设置userProjects 并立即调用updateSelects()。

  this.userProjects = p;
  this.updateSelects();

Angular 没有机会在两者之间做任何事情。 通过显式调用更改检测，您可以指示 Angular 更新 DOM：

constructor(private cdRef:ChangeDetectorRef) {}

ngOnChanges(changes) {
   if (!changes.user || (changes.user && !changes.user.currentValue.id)) {
      return;
   }

   this.userService.getUserProjects(this.user.id).subscribe(p=> {
      this.userProjects = p;
      this.cdRef.detectChanges(); // <<== enforce change detection
      this.updateSelects();
   } 
}