Question

我想要实现的目标：

每次用户在下面的代码中选择上选时的某个选项时，我想执行组件的方法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变量的范围仅限于标记。

有没有办法实现我想要达到的目标？

Answer 1

试试这个

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

你应该得到所选选项的索引我认为

Answer 2

您的代码存在的问题是您尝试访问SampleType指令范围之外的ngFor变量。由于您不在范围之内，因此您无法访问该变量，因此您的(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>

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

Answer 3

您可以传递以下值：

<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);
}

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

3 个答案: