Question

我的对象数组如下所示：

0: {Name: "Albert", Id: 32}
1: {Name: "George", Id: 34}
2: {Name: "Jane", Id: 35}

请求已成功完成，但我的数组保持不变。刷新我的应用程序时，项目（学生）将被删除。当我点击删除按钮时，我得到：INDEX：-1

我做错了什么？

student.component.html

<thead>
<tr style="font-weight: 500;font-size:15px;">
  <th data-field="id">Id</th>
  <th data-field="name">Display Name</th>
  <th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students;">
  <td>{{ student.Id }}</td>
  <td>{{ student.Name }}</td>
  <td><span class="ion-android-delete" (click)="onDelete(student.Id)"> </span></td>
</tr>
</tbody>

student.component.ts

onDelete(studentId: number) {
    if (window.confirm('Are you sure you want to delete?')) {
      var index = this.students.indexOf(studentId, 1);
        while (this.students.indexOf(studentId) !== -1) {
        this.students.splice(this.students.indexOf(studentId), 1);
      }

      this.studentService.deleteStudent(studentId)
        .subscribe(
        (response) => console.log(response));
        (error) => console.log(error));
    }
}

student.service.ts

deleteStudent(studentId: number) {    
  return this.http.delete......

            (response: Response) => {
                const data = response.json();
                return data;
            }
            )
            .catch(
            (error: Response) => {
                console.log(error);
                return Observable.throw(error);
            }
            );
}

编辑代码：

 onDeleteAgent(agentId: number) {
    if (window.confirm('Are you sure you want to delete?')) {

      while (this.agents.indexOf(this.agents) !== -1) {
        console.log(this.agents.indexOf(this.agents));
        this.agents.splice(this.agents.indexOf(this.agents), 1);
      }

      this.agentService.deleteAgent(agentId)
        .subscribe(
        (response) => console.log(response),
        (error) => console.log(error));
    }
  }

Answer 1

你的onDelete方法非常错误。如果你真的必须从sudentId开始，请执行以下操作：

onDelete(studentId: number) {
  if (!window.confirm('Are you sure you want to delete?')) {
    return;
  }

  var student = this.students.find(s => s.Id === studentId);
  var index = array.indexOf(student);

  if (index > -1) {
    array.splice(index, 1);
  }
}

您也可以像这样过滤数组（确保您可以先重新分配数组而不会出现任何问题）：

onDelete(studentId: number) {
  if (window.confirm('Are you sure you want to delete?')) {
    this.students = this.students.filter(s => s.Id !== studentId);
  }
}

Answer 2

student.component.html

onDelete(studentId: number,index) {
    if (window.confirm('Are you sure you want to delete?')) {
        this.students.splice(index, 1);    
      this.studentService.deleteStudent(studentId)
        .subscribe(
        (response) => console.log(response));
        (error) => console.log(error));
    }
}

student.component.ts

Table1 data
------------
Product_id     Product_source
101              CRM
102              CNT

Table2 data
-----------------
Product_id   item
101           item1
101           item2

Answer 3

在student.component.ts中，您的Delete方法错误（学生ID和对象数组不匹配），这是删除方法的简化版本，收到服务器响应后删除对象的好方法

onDelete(studentId: number) {
    if (window.confirm('Are you sure you want to delete?')) {      

      this.studentService.deleteStudent(studentId)
        .subscribe(
        (response) => {
             for(let i=0;i<this.students.length;i++){
               if(this.students[i].Id == studentId){
               this.students.splice(i,1);
                break;
             }
        });
        (error) => console.log(error));
    }
}

Answer 4

只需使用filter并过滤掉要删除的学生，并使用spread运算符设置新的对象引用至this.students。

onDelete(studentId: number) {
  if (window.confirm('Are you sure you want to delete?')) {
    this.students = [...this.students.filter((student:any) => student.Id !== studentId)];
  }
...

注意：扩展运算符不是必需的，但是使用不可变对象是一个好习惯和最佳做法。

没有点差运营商：

this.students = this.students.filter((student:any) => student.Id !== studentId);

如何使用typescript从角度中删除javascript对象数组

4 个答案: