Question

我正在使用Angular 2，我有一个div，我在我的标记中重复，其中有click个事件。代码如下所示：

标记：

<div class="row">
    <button class="btn btn-primary" (click)="addExtra">
        Add Extra</button>
    </div>

    <div *ngFor="let val of addExtra">
        <div class="row">
            <div class="col-md-2">
                <label for="title">Title</label>
            </div>
            <div class="col-md-8">
                <input type="text" id="title" style="width:100%" class="form-control" />
            </div>
        </div>
    </div>
</div>

按钮使用的TypeScript代码是：

class MyClass {
    // Other things in my code...

    addExtra(): void {
        this.addExtra.push("inserted");
    }
}

问题：如何为添加的每个div添加唯一ID，以便我可以使用删除按钮删除该div？

Answer 1

您可以使用index变量：

<div *ngFor="let val of addExtra let i=index" [id]="'id'+i">

但是对于删除按钮，您不需要id属性。你可以使用

<div *ngFor="let val of addExtra">
  <button (click)="delete(val)">delete</button>

或

<div *ngFor="let val of addExtra let i=index">
  <button (click)="delete(i)">delete</button>

如何在角度2.0中获得每个div的唯一ID？

1 个答案: