Angular 变化检测 ngFor

Question

我的选项卡视图上有一个名为 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>

我使用了一些方法，但其中 none 似乎有效。任何小帮助将不胜感激。

Answer 1

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

首先你在 category.name 上使用 [(ngModel)]="category.name" 和 (ngModelChange)="loadpeople(category.name)"，但接下来你迭代 category 并得到 cat.name，所以不能有category.name 元素，如果它是一个数组。

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

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

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>

Angular 变化检测 ngFor

Angular change detection ngFor

arrays

data-binding

ngfor

angular

angular8