Angular2 NgFor在表达式中绑定数组

Posted 2023-02-22

【中文标题】Angular2 NgFor在表达式中绑定数组

【英文标题】：Angular2 NgFor bind array in expression

【发布时间】：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 代码还是在您的实际代码中更复杂？

【参考方案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;
      
    );