绑定选择下拉选项变量

Question

我有一个ngFor循环，看起来像这样（简化，以便更容易跟踪）：

<div *ngFor="let c of customers"> 
    <button class="save green-button" type="button" (click)="editCustomer(c.CustomerId, method.value)">Save</button> 

    <select *ngIf="c.GrowMethodsAvailable.length" id="PerProjectGrowMethodId" name="PerProjectGrowMethodId" #method> 
     <option *ngFor="let method of c.GrowMethodsAvailable" [ngValue]="method.Value">{{method.Text}}</option> 
    </select> 
</div> 

正如你所看到的，存在保存按钮和一个选择下拉与动态选项。当我点击保存按钮时，我需要它发送我从相应下拉列表中选择的任何值。我知道如何将值绑定到我在我的类中创建的变量，但可能会有10个不同的保存按钮，并选择了10个不同的值，所以我认为每个选择下拉列表都需要一个局部变量。我将#method添加到select元素，并在保存按钮中将method.value添加到我的(click)="editCustomer(c.CustomerId, method.value)"函数中。当我尝试这一点，我得到了以下错误：

Cannot read property 'value' of undefined

我怎样才能从我所选选项的值绑定到对应的保存按钮，以便我发送正确的价值观为每一个？

Answer 1

与绑定有关的问题是内部重复#method为客户打破了select中的模板引擎的句柄。要改变它，并使其工作，我们需要改变我们的方法和沟渠模板变量，因为它们是静态定义的：

我们可以在这里滥用JS为了我们的缘故，在您的组件中添加一个属性来跟踪所选项目：

component.ts

selected = []; 

在HTML模板中，我们会访问该按钮属性和选择：

<div *ngFor="let c of customers"> 
     <button class="save green-button" type="button" (click)="editCustomer(c.CustomerId, selected[c.CustomerId])">Save</button> 

     <select *ngIf="c.GrowMethodsAvailable.length" [(ngModel)]="selected[c.CustomerId]"> 
      <option *ngFor="let method of c.GrowMethodsAvailable" [ngValue]="method.Value">{{method.Text}}</option> 
     </select> 
    </div> 

Plunker：http://plnkr.co/edit/bWnlJfydPbUxeeI6a715?p=preview