表达式中绑定数组的Angular2

表达式中绑定数组的Angular2,angular,typescript,Angular,Typescript,ngfor循环中使用的数组,当它被更新时,如何让Angular2重新运行该表达式?目前,它不会输出任何内容,因为它在开始时使用空数组运行-一旦更新(数组已更改),ngfor表达式不会重新运行-这是所需的功能。这是怎么做到的 例如在组件HTML中 <option *ngFor="let user of users" [value]="user.id">{{user.name}}</option> 在ngOnInit中,我们有一个对TS服务的调用,该服务返回用户数据 thi

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

例如在组件HTML中

<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
在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;
    });
  }
}

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

我建议像这样使用它:

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

{{user.name}

您可以检查,因为请求快速阵列未更新:

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

“更新”是什么意思?当你“更新”你的数组时,为什么不调用
这个.userDataService.getUsers….
方法呢?我们不能调用getUsers函数并直接分配给user属性,因为getUsers返回一个可观察的对象。
*ngFor
每次运行更改检测时都会检查数组的更改,并相应地更新DOM。您使用的正是上面的
ngOnInit
代码,还是实际代码中的代码更复杂?啊,是的,我忘记了更改检测器!非常感谢。
ngOnInit() {
    this.userDataService.getUsers().subscribe(user => {
      if(user){
        this.users = user;
      }
    });
  }