javascript - 更改表行中的 [(ngModel)] 值将影响正文中存在的所有行。如何解决？

Question

我有一个用 *ngFor 生成的表。现在在该表中我有 2 列和 5 行。第一列包含一个选择标签，第二列将显示所选值。现在的问题是，当您在任何行的选择标记中选择任何值时，所选值会显示在所有行中。

为了更好地理解问题，请引用 https://stackblitz.com/edit/angular-43oxrc

应用程序组件.ts

categoryCall(categoryName) {
    if (categoryName == 1) {
      this.categories = ["Value 1", "Value 2", "Value 3"];
    }
    else if (categoryName == 2) {
      this.categories = ["Value 4", "Value 6", "Value 5", "Value 7"];
    }
    else if (categoryName == 3) {
      this.categories = ["Value 7", "Value 8"];
    }
    return this.categories;
  }

app.componenent.html

<table>
          <tbody>
            <tr *ngFor="let item of [1,2,3,4,5]">
              <td>
                <select [(ngModel)]="selectedCategory">
                  <option *ngFor="let category of categoryCall(item)" [ngValue]="category">{{category}}</option>
                </select>
              </td>
              <td>
                Choosen Value: {{selectedCategory}}
              </td>
            </tr>
          </tbody>
        </table>

我需要喜欢；如果您在第一行中选择任何值，那么它的值应该只显示在第一行中。它不应反射(reflect)在任何其他行中

Answer 1

你不能那样做。原因是 selectedCategory 绑定(bind)到所有五个位置，因为它是一个值。您可以这样做。

TS

export class AppComponent  {
  selectedCategory: string;
  categories: string[];
  items = [];

  constructor () {
    this.addItems();
  }

  addItems() {
    for (let i = 0; i < 5; i++) {
      this.items.push({selectedCategory: null, number: i + 1});
    }
  }
}

HTML

<table>
  <tbody>
    <tr *ngFor="let item of items">
      <td>
        <select [(ngModel)]="item.selectedCategory">
          <option *ngFor="let category of categoryCall(item.number)" [ngValue]="category">{{category}}</option>
        </select>
      </td>
      <td>
      Choosen Value: {{item.selectedCategory}}
      </td>
    </tr>
  </tbody>
</table>

StackBlitz Demo