angular - 如何获取 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);
    }

传递完整元素

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

//.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?
    }