在 ngFor 循环中使用 ngModel

如何解决在 ngFor 循环中使用 ngModel

我在 ngModel 循环内使用 ngFor 从下拉菜单中获取值，如下所示：

<div *ngFor="let group of groups">
  <select [(ngModel)]="selectedOption">
          <option *ngFor="let o of options">
            {{o.name}}
          </option>
        </select>
  <p>Selected option: {{ selectedOption }}</p>
<div>

当我从下拉列表中选择一个选项时，它会将所有其他下拉列表设置为相同的值。这是预期的行为，因为在 ngModel 循环创建的所有实例上，selectedOption 都绑定到 ngFor。

我的问题是，在循环中解耦不同下拉列表以便它们独立运行的好方法是什么？

Stackblitz 是 here

解决方法

您将同一属性绑定到所有下拉列表。

如果你想用循环来做到这一点，那么你需要一个数组。 selectedOptions: string[] = []; 而不是 selectedOption: string;

打字稿部分也几乎不需要改动。

按照我在 Stackblitz 处解决问题的方法。

我更喜欢的方式是让它成为一个自己的组件：

<ng-container *ngFor="let group of groups">
   <app-group [group]=group [options]=options></app-group>
</ng-container>

组组件模板：

<select [(ngModel)]="selectedOption">
          <option *ngFor="let o of options">
            {{o.name}}
          </option>
        </select>
  <p>Selected option: {{ selectedOption }}</p>

GroupComponent TS 文件看起来有点像这样：

@Component({
...
})

@Input(): group: Group;
@Input(): options: any[]; // Whatever the data type of option is

selectedOption: any;

我认为您可以使用自定义类来解决您的问题。因为您可以为每个特定组声明一个 selectedOption。下面是我的代码。
请检查链接： Demo Link StackBlitz。
HTML：

<div *ngFor="let group of mygroups">
  <select [(ngModel)]="group.selectedOption" (ngModelChange)="checkChange($event,group)">
          <option *ngFor="let o of options">
            {{o.name}}
          </option>
        </select>
  <p>Selected option: {{ group.selectedOption }}</p>
</div>

TS：自定义组类

export class MyGroup{
  id:number;
  name:string;
  selectedOption:any;
}

代码在您的 AppComponent =>

mygroups: MyGroup[] = [];

  options = [
    { name: "option1",value: 1 },{ name: "option2",value: 2 }
  ]
  constructor(){
    for(let i=1;i<=2;i++){
      let temp= new MyGroup();
      temp.id=i;
      temp.name='N-'+i;
      this.mygroups.push(temp);
    }
  }
  checkChange($event,grp){
    console.log("GRP:"+grp.name);
    console.log("Data:"+$event);
  }

注意：我在 stackblitz 中更改和更新了您代码中的一些内容。

一个简单的解决方案是将所选选项绑定到组，如下所示。

创建一个新界面：

接口组{ 名称：字符串； selectedOption?: 字符串； }
将组的类型更改为组的数组：

组：组[] = [{名称：“组1”}，{名称：“组2”}];
更改 ngModel 绑定：

你可以找到我的解决方案here