Angular2 NgFor表达式中的绑定数组

时间:2016-12-23 08:27:50

标签: angular typescript

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

我建议使用它:

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

答案 2 :(得分:0)

您可以检查,因为请求快速数组不更新:

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