传递变量从ngFor到组件的方法

每当用户选择在上选在下面的代码中的一些选项，我要与所选择的对象来执行该组件的方法onSelectSampleType作为将组件的某些公共属性设置为传递参数的参数。

<select (change)="onSelectSampleType(SampleType)"> 
     <option *ngFor="let SampleType of sampleTypeList">{{ SampleType }}</option> 
    </select> 

    <select *ngIf="selectedSample""> 
     <option *ngFor ="let subType of selectedSampleType.subType">{{ subType }}</option> 
    </select>

问题： 在onSelectSampleType的SampleType参数（）方法，它被认为捕获ngFor指令SampleType被捕捉什么和通过未定义的值。我认为ngfor指令中的SampleType变量的范围仅限于标记。

有什么办法可以完成我想要达到的目标吗？

来源

2016-12-06 Jack_of_All_Trades

SampleType'的范围''是

我想我很难理解这一点。我该如何解决这个问题？ –

试试这个

<select (change)="onSelectSampleType(sel.value)" #sel> 
    <option *ngFor="let SampleType of sampleTypeList; let i = index" [value]="i">{{ SampleType }}</option> 
</select>

你应该选择的选项的指数，我认为

来源

2016-12-06 21:36:13 Dimanoid

你能解释一下#sel做什么吗？ –

声明局部变量，您可以在模板中的任何位置使用该变量来引用此元素。查看https://angular.io/docs/ts/latest/guide/cheatsheet.html中的

与您的代码的问题是，你要访问ngFor指令范围的SampleType变量外。由于您不在范围之内，因此您无法访问该变量，因此您的(change)回调没有收到您想要的数据。

如果回调的唯一目的是设置您的组件上selectedSampleType属性，你可以使用ngModel到控件绑定到selectSampleType直接：

<select [(ngModel)]="selectedSampleType"> 
    <option *ngFor="let SampleType of sampleTypeList">{{ SampleType }}</option> 
</select>

如果您需要更复杂的回调，您可以使用$event.target.value得到这引发了(change)事件的选项的值：

<select (change)="onSelectSampleType($event.target.value)"> 
    <option *ngFor="let SampleType of sampleTypeList">{{ SampleType }}</option> 
</select>

您可以找到有关角2事件绑定这里的更多信息：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

来源

2016-12-06 21:56:29 cmrn

您可以通过如下价值：

<select (change)="onSelectSampleType(selectedItem.value)" #selectedItem> 
    <option *ngFor="let SampleType of sampleTypeList;let i=SampleType" [value]="SampleType">{{ SampleType }}</option> 
</select>

打字稿：

public sampleTypeList = ["SampleType1", "SampleType2", "SampleType3"]; 

public onSelectSampleType(sampleType: string) { 
    console.log(sampleType); 
}

来源

2016-12-06 23:05:25

传递变量从ngFor到组件的方法

回答

相关问题