如何使用Angular5从表中删除行?

如何使用Angular5从表中删除行?,angular,button,data-binding,angular5,Angular,Button,Data Binding,Angular5,我是新的角度,我想删除用户点击按钮。尝试删除行时显示错误 DELETE: http://localhost:3000/User/undefined 404 not found 请纠正我的错误 这是我的user.component.html table class="table table-hover"> <tr> <th>SELECT</th> <th>ID</th> &l

我是新的角度,我想删除用户点击按钮。尝试删除行时显示错误

DELETE: http://localhost:3000/User/undefined 404 not found
请纠正我的错误

这是我的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>
这是我的user.service.ts

deleteUsers(id): Observable<User>{
    return this.http.delete<User>("http://localhost:3000/User"+"/"+id)
  }
这是包含常量数据的db.json文件

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

提前谢谢。

我想Alluser没有房产id

(click)="deleteUser(allUsers.id)"
因此,A在中未定义

deleteUsers(id): Observable<User>{
   var test = id === undefined; //should be true
}
deleteUsers(id):可观察{
var test=id==undefined;//应为true
}
在每行中创建一个删除按钮

  <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>

{{data.id}
{{data.name}
{{data.address}
删除

或者定义一个变量并将单选按钮的[value]绑定到它。然后调用delete并在delete方法中使用变量而不是参数。

我假设allUsers没有属性id

(click)="deleteUser(allUsers.id)"
因此,A在中未定义

deleteUsers(id): Observable<User>{
   var test = id === undefined; //should be true
}
deleteUsers(id):可观察{
var test=id==undefined;//应为true
}
在每行中创建一个删除按钮

  <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>

{{data.id}
{{data.name}
{{data.address}
删除

或者定义一个变量并将单选按钮的[value]绑定到它。然后调用delete并使用变量而不是delete方法中的参数。

删除表中除第一行以外的所有行

HTML:


等级:
该年级学生人数:

在ts文件中:

如果行是动态的

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);
      }
}
}
clearRows(){
设总表=10;
for(让index=0;index1;j--){
tabXX.deleteRow(1);
}
}
}

删除表中除第一行以外的所有行

HTML:


等级:
该年级学生人数:

在ts文件中:

如果行是动态的

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);
      }
}
}
clearRows(){
设总表=10;
for(让index=0;index1;j--){
tabXX.deleteRow(1);
}
}
}

为每行创建删除按钮后,它对我有效。谢谢。在为每行创建删除按钮后,它对我有效。非常感谢。