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

标签 angular

我想要实现的目标:

每次用户在下面的代码中选择上层选择上的某个选项时,我想以所选对象作为参数执行组件的 onSelectSampleType 方法,该方法将组件的某些公共(public)属性设置为传递的参数。

<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 变量的范围仅限于标签。

有什么办法可以实现我想要实现的目标吗?

最佳答案

试试这个

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

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

关于angular - 将变量从 ngFor 传递到组件的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41005189/

相关文章:

angular - 重新获取路由参数更改的数据

javascript - RadioButtons 行为奇怪 Angular 4

angular - OPTIONS 获取 401 - 预检请求未通过 Apache 上的访问控制检查

node.js - npm 包依赖项未安装

angular - 辅助路线未显示组件

Angular 2.0.1 AsyncPipe 不适用于 Rx Subject

webview - 如何在 Angular2 应用程序中使用 Electron 的 <webview>?

javascript - 在 html 页面中显示来自 Angularjs2 文件 (.ts) 的数据

javascript - Angular 7 Sweet Alert显示动态表格

javascript - 如何在Angular2中调用Polymer元素方法?