角2 ngModel並用選擇元件

Question

索引我有一個像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]」，它不會做我的在選擇價格時需要含義，selectedPrice [index]實際上不包含值。我還有其他一些方法可行，但他們很笨拙。

Answer 1

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 {}

Answer 2

請嘗試下面的代碼。變量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