Question

我想要这样的表格-

   a = [1,34,12,2,1]
<input type="checkbox" name="alarm_check" id="index_1">
<input type="checkbox" name="alarm_check" id="index_2">
<input type="checkbox" name="alarm_check" id="index_3">
<input type="checkbox" name="alarm_check" id="index_4">
<input type="checkbox" name="alarm_check" id="index_5">

但是输入元素的数量是动态的，并且取决于数组的长度。 id值也是动态的。如何制作这样的元素？有帮助吗？

Answer 1

使用ngFor指令并声明索引：

<input *ngFor="let item of a; let i=index" type="checkbox" name="alarm_check" id="{{'index_' + i}}" (change)="onChange($event.target.checked, item, i)">

然后click（check）处理程序将看起来像这样，实际上您在这些复选框上不再需要id属性：

public onChange(checked: boolean, item: number, index: number): void {
// do your stuff here 
}

Answer 2

要获取值，您可以执行以下操作：

EventController

Answer 3

您可以这样操作：

<div *ngFor="let a of [1,2,3,4]; let i = index">
  <input type="checkbox" name="alarm_check" id="index_{{i+1}}">
</div>

DEMO

如何迭代angular4中的html元素

3 个答案: