Angular变化检测ngFor

Question

我的标签视图上有一个名为peoples的数组。 我需要根据更改 function 更改数组项。 虽然更改 function 成功运行，并且在控制台上的每次更改后以不同方式打印数组，但视图本身并没有从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>

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

Answer 1

有些事情并不清楚你展示的内容。

首先你在 category.name 上使用[(ngModel)]="category.name"和(ngModelChange)="loadpeople(category.name)" category.name但是接下来你遍历category并得到cat.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>