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