问题

Question

我有以下divTable：

var arraysize =  [{ id: 59, size: 36}, { id: 123, size: 37}, { id: 62, size: 38}, { id: 63, size: 39}, { id: 64, size: 40}];
var arraycode = [{ id: 63, stock: 17}, { id: 123, stock: 16}, { id: 59, stock: 10}, { id: 64, stock: 12}, { id: 62, stock: 13}];
var arrayCodeObj = {};
arraycode.forEach(function(obj){arrayCodeObj[obj.id]=obj.stock});//create hash table
var arr2d = arraysize.map(function(obj){ return [obj.size, arrayCodeObj[obj.id]]})
console.log(arr2d)
console.log(arrayCodeObj)

如您所见，该表遍历数组<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>并为找到的每个项目创建一行。

通过连接到Web API在currentAlerts中弹出该数组。

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(); }从arra删除行，但是我无法正常工作。

Answer 1

在index，ngFor中添加*ngFor="let com of currentAlerts;let i = 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>

TS

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

}

Answer 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);
     }
    }    
  }

Answer 3

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

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

您的方法应如下所示：

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

单击按钮时，从DIV表中删除行

问题

3 个答案: