首页 文章

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

提问于
浏览 次
2

What I want to achieve:

每次用户在下面的代码中选择上选时的某个选项时，我想执行组件的方法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>

Problem: onSelectSampleType（）方法中的SampleType参数，该方法应该捕获ngFor指令的SampleType，捕获任何内容并传递未定义的值 . 我认为ngfor指令中的SampleType变量的范围仅限于标记 .

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

angular

3 回答

  • 1

    试试这个

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

    你应该得到我想的选定选项的索引

    回复于
  • 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);
}
    回复于
  • 0

    您的代码的问题是您正在尝试访问 ngFor 指令范围之外的 SampleType 变量 . 由于您're outside of the scope you can' t访问变量，因此 (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

    回复于

相关问题