在 ngFor 循环中使用 ngModel答案

【问题标题】：Using ngModel inside an ngFor loop在 ngFor 循环中使用 ngModel
【发布时间】：2021-06-11 16:53:42
【问题描述】：

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

<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 在ngFor 循环创建的所有实例上都绑定到selectedOption。

我的问题是，在一个循环中解耦不同下拉菜单以使它们独立运行的好方法是什么？

Stackblitz 是 here

【问题讨论】：

请检查我的代码，让我知道它是否解决了您的问题。最良好的祝愿。

标签： angular ngfor angular-ngmodel

【解决方案1】：

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

如果您想使用循环来执行此操作，那么您需要一个数组。 selectedOptions: string[] = []; 而不是 selectedOption: string;

并且打字稿部分也需要很少的变化。

在Stackblitz 关注我的问题解决方法。

【讨论】：

【解决方案2】：

我首选的方法是让它成为一个自己的组件：

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

GroupComponent 模板：

<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;

【讨论】：

【解决方案3】：

我认为您可以使用自定义类来解决您的问题。因为您可以为每个特定组声明一个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 中的代码中的一些内容。

【讨论】：

【解决方案4】：

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

创建一个新界面：

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

组：Group[] = [{ name: "Group1" }, { name: "Group2" }];
更改 ngModel 绑定：

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

【讨论】：