绑定选择下拉选项变量
问题描述:
我有一个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
我怎样才能从我所选选项的值绑定到对应的保存按钮,以便我发送正确的价值观为每一个?
答
与绑定有关的问题是内部重复#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>
我在记录i.value到控制台时,我点击保存在我的应用程序和你的plnkr,它回来的时候是未定义的。 – Brett
进一步阅读(我的道歉)表示模板变量绑定必须是静态的。 https://github.com/angular/angular/issues/4581#issuecomment-148786554 – silentsod