如何基于数组中的N个元素绑定N个select组件（*ngFor场景）

这问题我之前开发的时候也碰到过，核心原因很简单：你所有的select组件都绑定到了同一个全局变量selectedFruit上，不管操作哪个下拉框，都会修改这个变量的值，自然所有未操作的下拉框也会跟着显示相同的内容啦。

下面给你两种可行的解决方案，选哪种都可以，看你项目的实际需求：

方案一：给每个卡片对象添加独立的选中值属性 #

这种方法最直观，直接把每个卡片的选中值存在对应的card对象里，每个select绑定自己卡片的属性，互不干扰。

修改TS代码 #

给cardsArray里的每个对象新增selectedFruit属性，初始化为空字符串：

export class AppComponent {
  title = 'multiple-select';
  cardsArray = [
    { id: 1, name: 'First', selectedFruit: '' },
    { id: 2, name: 'Second', selectedFruit: '' },
    { id: 3, name: 'Third', selectedFruit: '' },
    { id: 4, name: 'Fourth', selectedFruit: '' }
  ]
  selectArray = [
    { id: 1, name: 'Banana', emoji: '🍌' },
    { id: 2, name: 'Apple', emoji: '🍎' },
    { id: 3, name: 'Pineapple', emoji: '🍍' },
    { id: 4, name: 'Kiwi', emoji: '🥝' }
  ]
}

修改HTML代码 #

把双向绑定的目标从全局的selectedFruit改成当前卡片的card.selectedFruit，同时底部的显示也对应修改：

<div class="container-fluid">
  <div class="row">
    <div class="card shadow col-4 p-1" *ngFor="let card of cardsArray">
      <div class="card-header">
        <strong class="card-title text-danger">Select your favorite fruit</strong>
      </div>
      <div class="card-body">
        <select class="form-control" [(ngModel)]="card.selectedFruit" [name]="'select-' + card.id" >
          <option *ngFor="let fruit of selectArray" [ngValue]="fruit.emoji">
            {{ fruit.name }}
          </option>
        </select>
      </div>
      <div class="card-footer">You selected: {{ card.selectedFruit }}</div>
    </div>
  </div>
</div>

方案二：用键值对对象存储每个卡片的选中值 #

如果不想修改原有的cardsArray结构，可以单独创建一个对象，用卡片的id作为键，存储对应的选中值。

修改TS代码 #

新增一个selectedFruits对象，并在组件初始化时给每个卡片设置初始值：

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  title = 'multiple-select';
  cardsArray = [
    { id: 1, name: 'First' },
    { id: 2, name: 'Second' },
    { id: 3, name: 'Third' },
    { id: 4, name: 'Fourth' }
  ]
  selectedFruits: { [key: number]: string } = {};
  selectArray = [
    { id: 1, name: 'Banana', emoji: '🍌' },
    { id: 2, name: 'Apple', emoji: '🍎' },
    { id: 3, name: 'Pineapple', emoji: '🍍' },
    { id: 4, name: 'Kiwi', emoji: '🥝' }
  ]

  ngOnInit(): void {
    // 初始化每个卡片的选中值为空
    this.cardsArray.forEach(card => {
      this.selectedFruits[card.id] = '';
    });
  }
}

修改HTML代码 #

把双向绑定的目标改成selectedFruits[card.id]，显示部分也对应调整：

<div class="container-fluid">
  <div class="row">
    <div class="card shadow col-4 p-1" *ngFor="let card of cardsArray">
      <div class="card-header">
        <strong class="card-title text-danger">Select your favorite fruit</strong>
      </div>
      <div class="card-body">
        <select class="form-control" [(ngModel)]="selectedFruits[card.id]" [name]="'select-' + card.id" >
          <option *ngFor="let fruit of selectArray" [ngValue]="fruit.emoji">
            {{ fruit.name }}
          </option>
        </select>
      </div>
      <div class="card-footer">You selected: {{ selectedFruits[card.id] }}</div>
    </div>
  </div>
</div>

两种方案都能解决你的问题，核心思路就是让每个select组件绑定独立的变量，这样它们的选中状态就不会互相影响啦。

内容的提问来源于stack exchange，提问作者Abri