如何获取ngFor数组的DOM元素？

Question

如何获取ngFor的实际元素，以便可以在Component.ts中使用它

例：

//.html
<div *ngFor="let element of elements">
      <md-card>{{element}}
           <button (click)="delete()">Delete</button>
     </md-card>
</div>

//.ts
   public delete() {
        mydata.delete(this.element)    //how to delete the actual element?
    }

Answer 1

元素维持指数

您可以保持索引处于循环状态并传递给方法。

//.html
<div *ngFor="let element of elements; let i = index;">
      <md-card>{{element}}
           <button (click)="delete(i)">Delete</button>
     </md-card>
</div>

//.ts
   public delete(index:number) {
      // if your elements is an array, you can use splice.
     elements.splice(index, 1);
    }

传递全部要素

如果您的数据结构有一种基于传递给它的元素删除的方法。 数组没有带对象的delete方法，必须进行拼接。 您可以像这样传递对象

//.html
<div *ngFor="let element of elements">
      <md-card>{{element}}
           <button (click)="delete(element)">Delete</button>
     </md-card>
</div>

//.ts
   public delete(element:ElementType) {
        mydata.delete(element)    //how to delete the actual element?
    }