this.students.splice (index, 1) не изменяется в пользовательском интерфейсе [Angular]

Question

Я пытаюсь удалить имеющийся у меня объект ученика в массиве учеников в родительском компоненте.Студент удаляется, передавая свое имя методу.Однако представление не обновляется.Вот мой код для метода удаления с использованием 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>

Answer 1

Это не проблема с кодом компонента.Вам нужно обновить 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 вам необходимо вернуть атрибут, который является уникальным для вашего объекта.

Answer 2

Я предполагаю, что 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;
      }
    }}

Answer 3

Вы мутируете массив, а затем назначаете новый массив поверх.Мутация плохая M'kay!

Я использую фильтр для такого рода удалений

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

Вы сравниваете имя с полным объектом ученика.Вот исправленный StackBlitz.

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