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

Question

What I want to achieve:

Everytime the user selects some option on upper-select in the code below, I want to execute the component's method onSelectSampleType with the selected object as parameter which sets some public property of component to the passed parameter.

<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>

Problem: the SampleType parameter in onSelectSampleType() method which is supposed to capture SampleType of ngFor directive is capturing nothing and passing undefined value. I think the scope of SampleType variable inside ngfor directive is just limited to tag.

Is there any way to accomplish what I want to achieve?

Answer 1

Try this

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

you should get index of selected option i think

Answer 2

The problem with your code is that you're trying to access the SampleType variable outside of the scope of the ngFor directive. Since you're outside of the scope you can't access the variable, so your (change) callback doesn't receive the data you want.

If the only purpose of your callback is to set the selectedSampleType property on your component, you can just use ngModel to bind the control to selectSampleType directly:

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

If you require a more complex callback, you can use $event.target.value to get the value of the option which triggered the (change) event:

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

You can find more information about Angular 2 event binding here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Answer 3

You can pass the value as below:

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

TypeScript:

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

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