如何使用Angular5从表中删除一行？答案

【问题标题】：how to delete a row from table using Angular5?如何使用Angular5从表中删除一行？
【发布时间】：2018-12-22 19:51:57
【问题描述】：

我是 Angular 新手，我想通过单击按钮来删除用户。当我尝试删除一行时显示错误。

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.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();},

    );
  }
}

这是我的 user.service.ts

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

编辑添加：

这是我的 user.model.ts

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

这是包含 const 数据的 db.json 文件

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

提前致谢。

【问题讨论】：

标签： angular button data-binding angular5

【解决方案1】：

从表中删除除第一行之外的所有行。

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>

在你的 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);
      }
}
}

【讨论】：

【解决方案2】：

我想 allUsers 没有属性 id

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

因此在

中未定义

deleteUsers(id): Observable<User>{
   var test = id === undefined; //should be 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>

或定义一个变量并将单选按钮的[值]绑定到它。然后调用delete，使用变量代替delete方法中的参数。

【讨论】：

在为每一行创建删除按钮后对我有用。谢谢。