Angular2 NgFor在表达式中绑定数组答案

【问题标题】：Angular2 NgFor bind array in expressionAngular2 NgFor在表达式中绑定数组
【发布时间】：2017-05-08 22:38:36
【问题描述】：

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

【问题讨论】：

“更新”是什么意思？当你“更新”你的数组时，为什么不调用this.userDataService.getUsers.... 方法呢？
我们不能调用 getUsers 函数并直接分配给 user 属性，因为 getUsers 返回一个 observable。
*ngFor 每次运行更改检测时都会检查数组的更改并相应地更新 DOM。您是在使用上面的 ngOnInit 代码还是在您的实际代码中更复杂？

标签： angular typescript

【解决方案1】：

您可以使用 ChangeDetectorRef 来检测更改。

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

在你的构造函数中注入它，当数组的值改变时调用detectChanges()方法：

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

  }

  users: IUser[] = []; 

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

【讨论】：

啊，是的，我忘记了变化检测器！真的非常感谢。

【解决方案2】：

我建议像这样使用它：

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

【讨论】：

【解决方案3】：

你可以检查一下，因为请求快速数组没有更新：

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

【讨论】：