How to delete a table row which is using nested loop using angular

Question

here my issues i am display a table using the nested *ngFor loop and and the table data is displayed using the Object Key approach as per my requirement here my issue is i unable to apply delete option for this .

here is my template .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>

and after clicking on delete i am following this approach

.ts

 delete(i){

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

here my issue is if click on the delete the entire tables row are getting deleted instead of single row

my table display like this

here

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

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

Answer 1

Looking at your data structure, it seems that by deleting anything from "Data" you delete the whole category.e.g it contains 2 items. ["laptop", "mobile"]. By deleting the "laptop" key then all the rows from that key are gone too.

You should delete a specific item from DynamicData instead.

e.g in pseudo code...you get the point.

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

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