this.students.splice(index,1) 在 UI [Angular] 中没有改变答案

【问题标题】：this.students.splice(index,1) is not changing in the UI [Angular]this.students.splice(index,1) 在 UI [Angular] 中没有改变
【发布时间】：2019-06-29 22:47:47
【问题描述】：

我正在尝试删除我在父组件的学生数组中的一个学生对象。通过将学生的姓名传递给该方法，学生将被删除。但是，视图不会更新。这是我使用splice删除方法的代码

 deleteStudent(name: string) {
    for (var x = 0; x < this.students.length; x++) {
      if (this.students[x].name === name) {
        this.students.splice(x, 1);
        this.students = [...this.students];
        console.log(x);
        return;
      }
    }}

这是父类的完整代码：

import { Component, OnInit } from "@angular/core";
import { student } from "../../student";

@Component({
  selector: "app-students",
  templateUrl: "./students.component.html",
  styleUrls: ["./students.component.css"]
})
export class StudentsComponent implements OnInit {
  students: student[] = [
    { name: "Marwa", level: "undergrad" },
    { name: "Heba", level: "undergrad" },
    { name: "Amal", level: "postgrad" }
  ];

  txt = "";
  toBeDeleted: student;

  public undergradsList = this.undergrads();
  constructor() {}

  ngOnInit() {
    this.undergrads();
    console.log(this.undergrads);
  }
  undergrads() {
    var Arrayres = new Array();
    for (var i = 0; i < this.students.length; i++) {
      if (this.students[i].level === "undergrad") {
        Arrayres.push(this.students[i].name);
      }
    }
    console.log(Arrayres);
    return Arrayres;
  }
  deleteStudent(name: string) {
    for (var x = 0; x < this.students.length; x++) {
      if (this.students[x].name === name) {
        this.students.splice(x, 1);
        this.students = [...this.students];
        this.undergradsList = this.undergrads();
        console.log(x);
        return;
      }
    }
    // const studentIndex = this.students.findIndex(e => e.name === name);

    console.log("hi delte");
  }
}

这是父级 HTML 组件的代码：

<h1>{{ txt }}</h1>
<app-under-grads
  (childEvent)="txt = $event"
  [studentList]="undergradsList"
  (studentDeletion)="deleteStudent($event)"
>
</app-under-grads>

这是我的子组件的代码：

import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";
import { student } from "../../student";

@Component({
  selector: "app-under-grads",
  templateUrl: "./under-grads.component.html",
  styleUrls: ["./under-grads.component.css"]
})
export class UnderGradsComponent implements OnInit {
  @Input() public studentList;
  @Output() public childEvent = new EventEmitter();

  constructor() {}

  ngOnInit() {
    console.log(this.studentList);
  }

  sendInfo() {
    this.childEvent.emit("Hello I am sending this to the parent");
  }

  @Output() public studentDeletion = new EventEmitter<string>();
  delete(name: string) {
    //  console.log("delete it");
    this.studentDeletion.emit(name);
    console.log(name);
  }
}

这是在屏幕上呈现的我的子组件的 HTML。 studentList 是一个名称字符串数组

<h2>UnderGrads</h2>
<div>
  <ul>
    <li *ngFor="let x of studentList">
      {{ x }} <button (click)="delete(x)">X</button>
    </li>
  </ul>
</div>

【问题讨论】：

我刚刚尝试了这段代码，它对我有用......但似乎比你需要的代码行更多。（我看到有些人已经提出了替代方案作为下面的答案。）我在这里有一个堆栈闪电战：stackblitz.com/edit/angular-moelmv
快速编程注意事项：如果您要从正在迭代的事物中删除项目，从末尾开始，而不是从头开始，因为从后面删除项目移到前面不会修改您尚未处理的部分。从前到后跑会绝对毁了一切。话虽如此： splice 已经修改了原始数组。为什么要根据自身重新创建它？那this.students = [... this.students] 没有意义，数组已经被.splice 减少了。
x 是整个对象，您将其与名称进行比较。
@DeborahK 我已经添加了我的 HTML 文件。如果我在 HTML 中做错了什么导致了问题，你能告诉我吗？
HTML 中的 delete(x.name) 将解决问题

标签： javascript arrays angular filter splice

【解决方案1】：

我假设undergradsList 与students 相同

所以在你的 deleteStudent 函数中

应该是这样的

 deleteStudent(name: string) {
    for (var x = 0; x < this.students.length; x++) {
      if (this.students[x].name === name) {
        this.students.splice(x, 1);
        this.undergradsList = [...this.students];
        console.log(x);
        return;
      }
    }}

【讨论】：

【解决方案2】：

你改变数组，然后在顶部分配一个新数组。突变很糟糕，M'kay！

我对这些删除使用过滤器

this.students = this.students.filter(s => student !== s);

您正在将名称与完整的学生对象进行比较。这是一个固定的 StackBlitz。

https://stackblitz.com/edit/angular-3nhmkw?file=src/app/app.component.ts

【讨论】：

我没有将名称与完整对象进行比较。我又更新了我的问题

【解决方案3】：

这不是您的组件代码的问题。您需要更新迭代数组的 html。

只需将trackBy 与您的ngFor 一起使用。

    <tr *ngFor="let hero of heroes; trackBy: trackHero" >
 <td>{{hero.name}}</td>
 </tr>


trackHero(index, hero) { 
console.log(hero); 
return hero ? hero.id : undefined;
 }

在 trackHero 中，您需要返回一个在您的对象中唯一的属性。

【讨论】：