如何获取 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?
    }

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

How can I get the DOM element of a ngFor array?

ngfor

angular