时间戳

首页 > 解决方案 > 如何根据数组中的 N 个元素绑定 N 个选择 (*ngFor)

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

问题描述

我在这个问题上挣扎了很多。在我的示例中，我有N卡尽可能多的选择。
I assigned every select a name using an id from the cardsArrayso 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: '' }
 ]
}

我该如何解决这个问题？

标签： angulartypescriptngforngmodel

解决方案

您将它们全部绑定到同一个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

推荐阅读