Angular 带选择元素的角度模型和索引

我有一个像这样的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>

{{price}}

显然，改变一个元素的价格会改变所有其他元素的价格

这里有一个叉子，我的意思是当你改变一个下拉，它改变了另一个。

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

---

我尝试了某些语法，比如[（ngModel）]=“selectedPrice[index]”，它不符合我的要求。这意味着当我选择价格时，selectedPrice[index]实际上不包含值。我有一些其他的方法可以工作，但它们很粗糙。

试试下面的代码。

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);
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{price}}
`,
})
导出类应用程序{
构造函数（）{}
价格=['40美元'，'30美元'，'20美元']
选择（）{
document.getElementById（'result'）。value=this.selectedPrice；
console.log（此.selectedPrice）；
}
}

---

尝试以下代码。

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);
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{price}}
`,
})
导出类应用程序{
构造函数（）{}
价格=['40美元'，'30美元'，'20美元']
选择（）{
document.getElementById（'result'）。value=this.selectedPrice；
console.log（此.selectedPrice）；
}
}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule}
从“@angular/forms”导入{FormsModule}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{game.name}{{i}{{{game.price}}
{{price}}
`,
})
导出类应用程序{
构造函数（）{}
价格=['40美元'，'30美元'，'20美元']；
games=[{name:'ge64'}，{name:'SM64'}]；
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule}
从“@angular/forms”导入{FormsModule}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{game.name}{{i}{{{game.price}}
{{price}}
`,
})
导出类应用程序{
构造函数（）{}
价格=['40美元'，'30美元'，'20美元']；
games=[{name:'ge64'}，{name:'SM64'}]；
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

澄清这不符合我的要求。我澄清了我的意思并更新了我的问题澄清这不符合我的要求。我澄清了我的意思并更新了我的问题我尝试了这个方法，尽管它有效，有没有一种更简单的方法可以在不创建其他输入值的情况下使用索引？@Garuuk这种方法更简单：我用你的plnkr来告诉你我在说什么。-请注意，当您更改一个下拉列表时，其他更改也会随之更改。我正试着得到它所以只有一个changes@Garuuk你想在改变价格的同时改变游戏的名称吗？我已经尝试过了，虽然它有效，但有没有一种更简单的方法利用索引而不创建另一个输入值？@Garuuk这种方法更简单：我用你的plnkr来告诉你我在说什么。-请注意，当您更改一个下拉列表时，其他更改也会随之更改。我正试着得到它所以只有一个changes@Garuuk你想在改变价格的同时改变游戏的名称吗？