how to delete a row from table using Angular5?

Question

I am new in angular, i want to delete user by clicking on button . showing error when i try to delete a row.

DELETE: http://localhost:3000/User/undefined 404 not found

Please correct my mistake.

This is my user.component.html

table class="table table-hover">
    <tr>
        <th>SELECT</th>
        <th>ID</th>
        <th>NAME</th>
        <th>ADDRESS</th>
        </tr>

    <tr *ngFor="let data of allUsers">
        <td><input type="radio" name="id" [value]="allUsers.id" ></td>
         <td>{{data.id}}</td>
         <td>{{data.name}}</td>
         <td>{{data.address}}</td>
        </tr>
    </table>
    <div class="buttonClass">

    <input type="button" class="btn btn-success" value="Add User"/>
    <input type="button" class="btn btn-danger" (click)="deleteUser(allUsers.id)" value="Delete User"/>
</div>

This is my user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './userService/user.service';
import { User } from '../../model/user.model';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(
    private userService : UserService 
  ) { }

  ngOnInit() {
    this.getallUser();

  }
  allUsers: User[];
  getallUser(){
    this.userService.getAllUsers().subscribe(
      (data)=> {this.allUsers=data;},
      (error)=> {console.log(error);},
      ()=> {console.log("All Users Recieved");}
    );
  }
  deleteUser(id: number){
    alert("In Delete")
    this.userService.deleteUsers(id).subscribe(
      (data)=> {this.getallUser();},

    );
  }
}

and This is my user.service.ts

deleteUsers(id): Observable<User>{
    return this.http.delete<User>("http://localhost:3000/User"+"/"+id)
  }

Edited to add:

here is my user.model.ts

export class User {
    id: number;
    name: string;
    address: string;
}

and this is db.json file which contains const data

{
  "User": [
    {
      "id": 1,
      "name": "Shiva",
      "address": "pune"
    },
    {
      "id": 2,
      "name": "mark",
      "address": "mumbai"
    },
    {
      "id": 3,
      "name": "rinku",
      "address": "solapur"
    }
  ]
}

Thanks in advance.

Answer 1

To delete all the rows from a table except the first row.

HTML:

<form>
            <table id="contentTable0" class="table">
                                    <tbody id="myTable0">
                                        <tr>
                                            <td colspan="2">
                                                <label for="classNamei0">Grade:</label>
                                                <input id="classNamei0" *ngIf="!allGrades" class="form-control" value="1-3" disabled />
                                                <input id="classNamei0" *ngIf="allGrades" class="form-control" maxlength="2" value="1" disabled />
                                            </td>

                                            <td colspan="2">
                                                <label>Number of students in this grade:</label>
                                                <input type="number" id="noOfStudentsPerGrade0" class="form-control" name="perGrade" disabled />
                                            </td>

                                            <td>
                                                <br />
                                                <span type="submit" name="name0" id="addRow" class="fa fa-plus"></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
            </form>

In your ts file:

If the rows are dynamic

clearRows() {
  let total_tables = 10;
    for (let index = 0; index < total_tables; index++) {
      let tabXX = document.getElementById(
        "contentTable" + index
      ) as HTMLTableElement;
      if (!tabXX) continue;
      let rows = tabXX.getElementsByTagName("tr");
      for (let j = rows.length; j > 1; j--) {
        tabXX.deleteRow(1);
      }
}
}

Answer 2

I suppose that allUsers does not have a property id

(click)="deleteUser(allUsers.id)"

an therefore is undefined in

deleteUsers(id): Observable<User>{
   var test = id === undefined; //should be true
}

Either create a delete button in each row

  <tr *ngFor="let data of allUsers">    
     <td><input type="radio" name="id" [value]="allUsers.id" ></td>
     <td>{{data.id}}</td>   
     <td>{{data.name}}</td>    
     <td>{{data.address}}</td> 
     <td><button (click)="deleteUser(data.id)">delete</button></td>
  </tr>

or define a variable and bind [value] of radio button to it. Then call delete and use the variable instead of the parameter in the delete method.