Question

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

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

这是db.json文件，其中包含const数据

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

谢谢。

Answer 1

我想allUsers没有属性ID

$.ajax({
method: "POST",
url: "/signup/reg",
data: { password: password, spamcodevaluefrompage:spamcode, email:email}
})
.done(function( msg ) {

});

因此在

中未定义

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

在每行中创建一个删除按钮

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

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

Answer 2

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

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);
      }
}
}

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

2 个答案: