Angular2 NgFor 在表达式中绑定(bind)数组

Question

在 ngfor 循环中使用的数组，当它被更新时，你如何让 Angular2 重新运行那个表达式？目前它不会输出任何内容，因为它在开始时使用空数组运行 - 一旦更新(数组已更改)ngfor 表达式不会重新运行 - 这是所需的功能。这是怎么做到的？

例如在组件 HTML 中；

<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>

在组件TS中我们声明了一个属性；

users: IUser[] = [];

在 ngOnInit 中，我们调用了一个返回用户数据的 TS 服务；

this.userDataService.getUsers().subscribe(data => {
    this.users = data;
});

更新了代码示例；

@Component({
  selector: 'app-manage-user',
  templateUrl: './user-form.component.html',
  providers: [UsersDataService]
})
export class UserFormComponent implements OnInit {

  constructor(private userDataService: UsersDataService) {

  }

  users: IUser[] = []; 

  ngOnInit() {
    this.userDataService.getUsers().subscribe(user => {
      this.users = user;
    });
  }
}

Answer 1

您可以使用 ChangeDetectorRef 来检测变化。

import {ChangeDetectorRef} from '@angular/core';

将它注入(inject)到你的构造函数中，并在数组值改变时调用 detectChanges() 方法:

  constructor(private userDataService: UsersDataService, private changeDetector: ChangeDetectorRef) {

  }

  users: IUser[] = []; 

  ngOnInit() {
    this.userDataService.getUsers().subscribe(user => {
      this.users = user;
      this.changeDetector.detectChanges();
    });
  }