Question

我是角色2的新手，想要从html元素中获取数据并从DOM中删除html元素。

基本上我在下面的代码中，当用户点击删除图标时我想收集{{i.firstName}}值，打开一个带有“你确定要删除{{i.firstName}}吗？”的弹出窗口。如果用户单击是，则整个TR标记意味着需要从DOM中删除整行。

我正在进行一些其他参考，我发现有人使用ElementRef，但我无法在此进展。任何人都可以给我一个参考视频或链接，我可以在其中了解有关ElementRef的更多信息。

deleted(event){
    console.log(event.target.parent.innerHTML);
  }

<tbody>
      <tr *ngFor="let i of array; let j = index" [id]="j">
        <td>{{i.firstName}}</td>
        <td>{{i.lastName}}</td>
        <td>{{i.age}}</td>
        <td>{{i.address}}</td>
        <td><button class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span></button></td>
        <td><button class="btn btn-primary" (click)="deleted($event)"><span class="glyphicon glyphicon-remove"></span></button></td>
      </tr>
    </tbody>

Answer 1

您可以将当前索引与点击事件一起传递。

(click)="deleted($event, j)"

并从ngFor中检索到的数据（数组）中删除相关的数据行。 ngFor会自动删除相关的DOM元素。

delete(event, index) {
  if(window.confirm('really removing current row?')) {
    this.array.splice(index, 1);
  } else {
    return false;
  }
}

使用ViewChildren添加关于在组件中删除元素的example。

Angular 2获取元素数据并将其删除

1 个答案: