【问题标题】：Delete row from DIV table when button clicked单击按钮时从 DIV 表中删除行
【发布时间】：2019-08-28 19:34:08
【问题描述】：

我有以下 divTable：

<div class="divTable">
        <div class="divTableBody">
                <div class="divTableRow">
                        <div class="divTableCell">TagName</div>
                        <div class="divTableCell">Higher/Lower</div>
                        <div class="divTableCell">Threshold</div>
                        <div class="divTableCell">Delete Alert?</div>
                </div>
                <div class="divTableRow" *ngFor="let com of currentAlerts">
                        <div class="divTableCell">{{com.tagname}}</div>
                        <div class="divTableCell">{{com.symbol == 1 ? 'Higher than' : 'Lower than'}}</div>
                        <div class="divTableCell">{{com.threshold}}</div>
                        <div class="divTableCell">
                           <button mat-stroked-button color="primary" (click)="submit(com.ID)">
                              Delete
                           </button>
                        </div>
                </div>
        </div>

如您所见，此表循环遍历数组 currentAlerts 并为找到的每个项目创建一行。

该数组通过连接到 Web API 在ngOnInit() 中填充。

this.alerts.getCurrentAlerts(this.loginEmail)
      .subscribe
      ((data: CurrentAlerts[]) => {this.currentAlerts = data;
        console.log(this.currentAlerts.length)
        if(!this.currentAlerts || !this.currentAlerts.length){
          this.alertsTitleMessage = "You have no alerts configured."
        }else{
          this.alertsTitleMessage = "Here are the Alerts you have set up "
        }}
      );

当点击删除按钮时，删除请求被发送到数据库。

  submit(ID){
    let isDeleted = null;
    this.alerts.deleteCurrentAlert(ID).subscribe(result => isDeleted = result);
    this.manageCurrentAlerts();
    
  }

以上所有操作都按预期工作，数据已从数据库中删除。

问题

如何让表格删除已删除的行？我已经阅读了使用splice 从arra 中删除行的答案，但我无法让它工作。

【问题讨论】：

标签： html angular typescript

【解决方案1】：

在ngFor、*ngFor="let com of currentAlerts;let i = index"中添加index
在删除按钮中，传递index 即i 而不是com.ID
在 TS 函数中使用 splice，this.currentAlerts.splice(index,1)

试试这样：

<div class="divTableRow" *ngFor="let com of currentAlerts;let i = index">
  ...
  <div class="divTableCell">
    <button mat-stroked-button color="primary" (click)="submit(i)">Delete</button>
  </div>
</div>

submit(index){
  this.currentAlerts.splice(index,1)
  ...

}

【讨论】：

【解决方案2】：

从数据库中删除后从数组中删除。

submit(ID){
    let isDeleted = null;
    this.alerts.deleteCurrentAlert(ID).subscribe(result => isDeleted = result);
    this.manageCurrentAlerts();
    for(var i = 0; i< this.currentAlerts.length ; i++) {
     if(this.currentAlerts[i].ID === ID) {
       this.currentAlerts.splice(i, 1);
     }
    }    
  }

【讨论】：

【解决方案3】：

在您来自服务器的响应中，您需要从数组中删除该项目，因此在您的方法中： this.alerts.deleteCurrentAlert(ID).subscribe(result => isDeleted = result);

您应该应用过滤器方法。 Splice 也可以工作，但 Filter 的性能更好。

你的方法应该是这样的：

this.alerts.deleteCurrentAlert(ID).subscribe(result => {
  this.currentAlerts = this.currentAlerts.filter(item => item.ID != ID);
  isDeleted = result;
});

【讨论】：