Angular 2 ngModel 和带有 select 元素的索引

Question

我有一个像这样的 ng for 循环

<template ngFor let-game [ngForOf]="(games)" let-index="index">
    <tr>
        <td>
            <select [(ngModel)]="selectedPrice" class="form-control" name="">
                <option *ngFor="let price of prices">{{price}}</option>
            </select>
        </td>
        <td>
    </tr>
</template>

显然，更改一个元素的价格会影响所有其他元素。

这是我的意思的分支，当你改变一个下拉菜单时，它会改变另一个。 https://plnkr.co/edit/LVViSdlgmY56RnO8mAU4?p=preview

我的问题是：有没有办法利用模板元素中的索引为每个生成的元素只绑定一个 selectedPrice？因此，当我更改一个下拉值的值时，它不会为所有其他值更改它们

我已经尝试过某些语法，比如 [(ngModel)]="selectedPrice[index]" 当我 select 一个价格时，它并没有达到我想要的意思， selectedPrice[ index] 实际上不包含值。我还有其他一些可行的方法，但它们很老套。

Answer 1

试试下面的代码。 selectedPrice 变量现在包含选定的值。

@Component({
  selector: 'my-app',
  template: `
      <tr>
        <td>
          <select [(ngModel)]="selectedPrice" class="form-control" name="" (change)="select()">
            <option *ngFor="let price of prices">{{price}}</option>
          </select>
        </td>
      </tr>
    <input id="result">
  `,
})

export class App {
  constructor() {}

  prices = ['40$', '30$', '20$']

  select(){
     document.getElementById('result').value = this.selectedPrice;
     console.log(this.selectedPrice);
  }
}

Plunker code

Answer 2

https://plnkr.co/edit/nOQ4ve9ee2A1TZjvrQBS?p=preview

//our root app component
import {Component, NgModule} from '@angular/core'
import {FormsModule} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
      <tr *ngFor="let game of games; let i='index'">
        <td>
          {{game.name}} {{i}} {{game.price}}
        </td>
        <td>
            <select [(ngModel)]="games[i].price" class="form-control">
                <option *ngFor="let price of prices">{{price}}</option>
            </select>
        </td>
    </tr>
  `,
})
export class App {
  constructor() {}
  
  prices = ['40$', '30$', '20$'];
  games = [{name:'ge64'}, {name:'SM64'}];
  
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Angular 2 ngModel 和带有 select 元素的索引

Angular 2 ngModel and index with select element

angular2-ngmodel

ngfor

angular