在 ngFor 循环中使用 ngModel

Question

我在 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

Answer 1

您将相同的属性绑定到所有下拉菜单。

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

并且打字稿部分也需要稍作改动。

按照我在 Stackblitz.

解决问题的方法

Answer 2

我的首选方式是使其成为自己的组件：

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

Answer 3

我认为您可以使用自定义 class 来解决您的问题。因为您可以为每个特定组声明一个 selectedOption。下面是我的代码。
请检查 link: 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:自定义组Class

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 中更改和更新了您的代码中的一些内容。

Answer 4

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

创建新界面：

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

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

在 ngFor 循环中使用 ngModel

Using ngModel inside an ngFor loop

angular

ngfor

angular-ngmodel