将元素的属性传递给角度 4/5 的函数答案

【问题标题】：passing attribute of element to a function in angular 4/5将元素的属性传递给角度 4/5 的函数
【发布时间】：2018-03-04 04:14:39
【问题描述】：

我想通过单击按钮将元素的属性值传递给函数，这就是我的做法

<div>
  <ul #list>
    <li class="radio" *ngFor="let option of options; let j = index" id={{i}}-{{j}} #item>
      <label><input type="radio" #opt  name={{i}} value={{option}} /> {{option}} </label>
    </li>
  </ul>
</div>
<button type="button" (click)='func(opt.value, item.id, list)'>submit</button>

我在这里做的是

我正在传递单选按钮的值（第一个参数）
传递列表项的ID（第二个参数）
传递整个列表的引用（第三个参数）

但当然它不起作用，错误消息说无法读取 undefined(first arg) 的值，我怀疑参数的其余部分也会发生同样的情况。

所以我的问题是如何将属性值传递给函数？

PS：我是 Angular 的新手

【问题讨论】：

模板引用变量opt 仅在ngFor 循环中可见。我们可以理解为什么：因为您可以在options 中拥有多个项目，因此有多个单选输入元素，不清楚opt 将在按钮单击事件处理程序中引用哪一个。同样的问题适用于变量item，但变量list 应该可以工作，因为它与按钮在同一范围内。
weblogs.thinktecture.com/thomas/2017/05/…

标签： javascript angular angular5

【解决方案1】：

您可以在change() 上将变量设置为所选选项的值和项目 ID，并在单击按钮时将其传递。

<div>
  <ul #list>
    <li class="radio" *ngFor="let option of options; let j = index" id={{i}}-{{j}} #item>
      <label><input type="radio" #opt name={{i}} value={{option}} (change)="selectedOptionValue=option.value; selectedItemID=item.id" /> {{option}} </label>
    </li>
  </ul>
</div>
<button type="button" (click)='func(selectedOptionValue, selectedItemID, list)'>submit</button>

请务必检查后端 func 函数中的这些值，看看它们是否已设置。

【讨论】：

是的，做了类似的事情