Angular2 NgFor表达式中的绑定数组

jjj 发表于 Dev

ngfor循环中使用的数组，更新后如何使Angular2重新运行该表达式？当前，它不会输出任何内容，因为它在一个空数组的beginnin上运行-更新（数组已更改）后，不会重新运行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;
    });
  }
}

阿卡什（Akash Nigam）

您可以使用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();
    });
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。