角度变化检测 ngFor答案

【问题标题】：Angular change detection ngFor角度变化检测 ngFor
【发布时间】：2021-08-07 10:59:04
【问题描述】：

我的标签视图上有一个名为 peoples 的数组。我需要根据更改函数更改数组项。虽然更改功能成功运行并且在控制台上每次更改后以不同方式打印数组，但视图本身并没有改变从ngInit() 分配的初始值；

ngOnInit(){
  this.someservice.loadallpeople().subscribe(data=>{
    this.peoples=data.Data;
  });
}

loadpeople(category:any){
  this.someservice.getpeoplebycat(category).subscribe(data=>{
    this.peoples=data.Data;
  });
}

<select [(ngModel)]="category.name"
        (ngModelChange)="loadpeople(category.name)">  
  <option *ngFor="let cat of category">{{category.name}} </option>
</select>  
    
<div *ngFor="let people of peoples">
  <span>{{people.name}}</span>
</div>

我已经使用了一些方法，但它们似乎都不起作用。任何小的帮助将不胜感激。

【问题讨论】：

请显示change()函数。和loadpeople()函数有什么关系？
您能提供stackblitz 的最小复制吗？就像你展示的那样，它应该可以工作，所以其他地方一定有问题
您不会取消订阅loadallpeople。它可能与此相关，以防可观察对象发出一个新值。
你试过angular.io/api/core/ChangeDetectorRef#detectchanges吗？
@Aneesh 您找到解决问题的方法了吗？我的对你有用吗？

标签： arrays angular data-binding angular8 ngfor

【解决方案1】：

您所展示的内容有些地方不清楚。

首先您在category.name 上使用[(ngModel)]="category.name" 和(ngModelChange)="loadpeople(category.name)"，但接下来您遍历category 并得到cat.name，因此如果category.name 元素是一个数组，则不能有category.name 元素。

其次，根据您显示的内容，我将只使用(change) 而不是[ngModel] + (ngModelChange)，因为如前所述，category.name 无法返回任何内容。

所以有了所有这些更新，我会做这样的事情

ngOnInit(){
  this.someservice.loadallpeople().subscribe(data=>{
    this.peoples=data.Data;
  });
}

loadpeople(event){
  this.someservice.getpeoplebycat(event.target.value).subscribe(data=>{
    this.peoples=data.Data;
  });
}

<select (change)="loadpeople($event)">  
  <option *ngFor="let cat of category">{{cat.name}} </option>
</select>  
    
<div *ngFor="let people of peoples">
  <span>{{people.name}}</span>
</div>

【讨论】：