如何根据数组中的 N 个元素绑定 N 个选择 (*ngFor)

Question

我在这个问题上苦苦挣扎。在我的示例中，我有 N 卡尽可能多的选择。
I assigned every select a name using an id from the cardsArray so every name is unique, but when a value is choosen all the others fill up with the same value even if they are untouched.

HTML：

<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)]="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: {{ selectedFruit }}</div>
</div>

TS：

export class AppComponent {
 title = 'multiple-select';

 cardsArray = [
  { id: 1, name: 'First' },
  { id: 2, name: 'Second' },
  { id: 3, name: 'Third' },
  { id: 4, name: 'Fourth' }
 ]

 selectedFruit: string = '';

 selectArray = [
  { id: 1, name: 'Banana', emoji: '????' },
  { id: 2, name: 'Apple', emoji: '????' },
  { id: 3, name: 'Pineapple', emoji: '????' },
  { id: 4, name: 'Kiwi', emoji: '????' }
 ]
}

我该如何解决这个问题？？

Answer 1

您使用相同的selectedFruit 变量将它们全部绑定。您应该将它们与不同的变量绑定，以便它们可以同时具有不同的值。

您可以将selectedFruit 更改为一个对象，并将选择与该对象的属性绑定：

export class AppComponent {
 title = 'multiple-select';

 cardsArray = [
  { id: 1, name: 'First' },
  { id: 2, name: 'Second' },
  { id: 3, name: 'Third' },
  { id: 4, name: 'Fourth' }
 ]

 selectedFruit: any = {};

 selectArray = [
  { id: 1, name: 'Banana', emoji: '?' },
  { id: 2, name: 'Apple', emoji: '?' },
  { id: 3, name: 'Pineapple', emoji: '?' },
  { id: 4, name: 'Kiwi', emoji: '?' }
 ]
}

<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)]="selectedFruit[card.name]"
      [name]="'select-' + card.id"
    >
      <option *ngFor="let fruit of selectArray" [ngValue]="fruit.emoji">
        {{ fruit.name }}
      </option>
    </select>
  </div>
  <div class="card-footer">You selected: {{ selectedFruit[card.name] }}</div>
</div>

现在selectedFruit 会将所有 4 个选择的值存储在相关属性 First、Second、Third 和 Fourth 中。

下面是工作示例：https://stackblitz.com/edit/angular-ivy-gxrgmb?file=src/app/app.component.html