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

时间:2017-03-07 15:01:11

标签: angular ngfor

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

示例:

SELECT *
FROM   (
  SELECT t.*,
         CASE
           WHEN LAG( date_time ) OVER( PARTITION BY det_id ORDER BY date_time ) IS NULL
           THEN 1
           WHEN date_time - LAG( date_time ) OVER( PARTITION BY det_id ORDER BY date_time )
                  BETWEEN 29/(24*60*60) AND 31/(24*60*60)
           THEN 1
           ELSE 0
         END AS is_within_30_seconds
  FROM   your_table t;
)
WHERE is_within_30_seconds = 0;

1 个答案:

答案 0 :(得分:4)

维护元素索引

您可以在循环中维护索引并传递给方法。

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