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