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个不同的值，因此我假设每个选择下拉列表都需要一个局部变量。我在select元素中添加了#method，并在保存按钮中将method.value添加到我的(click)="editCustomer(c.CustomerId, method.value)"函数中。当我尝试这个时，我收到以下错误：

无法阅读财产＆＃39;价值＆＃39;未定义的

如何将选定选项中的值绑定到相应的保存按钮中，以便为每个选项发送正确的值？

Answer 1

绑定的问题是，在#method内为客户重复*ngFor会破坏模板引擎对select的处理。为了改变它，并使其工作，我们需要改变我们的方法和沟渠模板变量，因为它们是静态定义的：

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

<强> component.ts

selected = [];

在HTML模板中，我们将在按钮和select：

中访问该属性

<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

将选定的下拉选项绑定到变量

1 个答案: