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