如何使用角度删除使用嵌套循环的表行答案

【问题标题】：How to delete a table row which is using nested loop using angular如何使用角度删除使用嵌套循环的表行
【发布时间】：2018-08-09 16:03:40
【问题描述】：

在这里我的问题是我使用嵌套的 *ngFor 循环显示一个表，并且根据我的要求使用对象键方法显示表数据我的问题是我无法为此应用删除选项。

这是我的模板 .html

 <ng-container *ngFor="let key of Data">
                        <tr *ngFor="let item of List[key];let i = index;">
                            <td>{{key}}-{{i}}</td>
                            <td>{{item}}--{{i}}</td>
                            <td>
                              <button (click)="del(i)">delete</button>
                            </td>

                        </tr>
                    </ng-container>

点击删除后，我将采用这种方法

.ts

 delete(i){

         this.Data.splice(i, 1);
      }

我的问题是如果点击删除整个表格行将被删除而不是单行

我的表格显示是这样的

这里

DynamicData = {
    "laptop": [
        "dell", 
        "hp", 
        "lenovo", 
        "acer", 
        "asus"
    ],
    "mobile": [
        "lenovo", 
        "motorolla", 
        "apple", 
        "samsung"
    ] 
}

this.List =  DynamicData;
this.Data = Object.keys(this.List);

【问题讨论】：

什么是Data 和List？
@ExplosionPills 更新问题

标签： javascript angular typescript

【解决方案1】：

查看您的数据结构，似乎通过从“数据”中删除任何内容，您删除整个类别。例如，它包含 2 个项目。 [“笔记本电脑”，“手机”]。通过删除“笔记本电脑”键，该键中的所有行也会消失。

您应该改为从 DynamicData 中删除特定项目。

例如在伪代码中......你明白了。

<button (click)="del(List[key], i)">delete</button>

delete(array, i){
  array.splice(i, 1);
}

【讨论】：