javascript - 将元素的属性传递给 Angular 4/5 中的函数

Question

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

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

我在这里做的是

1. 我正在传递单选按钮的值(第一个参数)
2. 传递列表项的 id(第二个参数)
3. 传递整个列表的引用(第三个参数)

但是，当然它不起作用，错误消息显示无法读取未定义的值(第一个参数)，我怀疑参数的其余部分也会发生同样的情况。

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

PS:我是 Angular 东西的新手

Answer 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 函数中的这些值，看看它们是否已设置。