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>