Question

我使用* ngFor来显示页面上的元素列表。当用户单击特定元素时，该元素是从特定列表项生成的。我希望列表中的这个项目传递给函数 onChange（）。但它只传递函数 onChange（）中所有元素的第一个id。同时，将id传递给函数 isChecked（）也可以正常工作。我认为这种行为与属性绑定 [checked] =＆＃34; foo（）＆＃34; 之间的处理差异以及事件监听（更改）=＆＃34; foo（）＆＃34;

<li *ngFor="let d of someList">
<div>
    <label for="checkbox>
        <input type="checkbox" id="checkbox"
               (change)="onChange($event,d.id)"
               [checked]="isChecked(d.id)">
        <span>{{d.value}}</span>
    </label>
</div>
<span>{{d.local}}</span>

但无论如何我怎么能得到理想的行为？谢谢。

更新：问题解决了，但还有一些问题。

更改了我的代码：

<li *ngFor="let d of someList">
<div>
    <label [attr.for]="'checkbox_'+d.id"
        <input type="checkbox" id="checkbox_{{d.id}}"
               (change)="onChange($event,d.id)"
               [checked]="isChecked(d.id)">
        <span>{{d.value}}</span>
    </label>
</div>
<span>{{d.local}}</span>

它有效。然后我拿走了html＆＃39; id＆＃39;来自输入的属性，它也可以。那有什么问题呢？正如我所看到的，如果许多元素具有相同的id（当你不用循环生成它时），angular就不能正常使用它们。所以你必须不要使用“id”＃39;在循环中唯一地或生成它。这样对吗？谢谢。

Answer 1

<li *ngFor="let d of someList">
<div>
    <label [attr.for]="checkbox_{{d.id}}">
        <input type="checkbox" id="checkbox_{{d.id}}"
               (change)="onChange(d.id)"
               [checked]="isChecked('checkbox_' + d.id)">
        <span>{{d.value}}</span>
    </label>
</div>
<span>{{d.local}}</span>

Angular 2 * ngFor onClick（）调用当前元素的函数

1 个答案: