this.students.splice(index,1) 在 UI [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;
      }
    }}

这是父级的完整代码class：

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

您改变数组，然后在顶部分配一个新数组。突变不好 M'kay！

我对这类删除使用过滤器

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

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

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

Answer 2

这不是您的组件代码的问题。您需要更新迭代数组的 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 中，您需要 return 一个在您的对象中唯一的属性。

Answer 3

我假设 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;
      }
    }}

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

this.students.splice(index,1) is not changing in the UI [Angular]

javascript

arrays

angular

filter

splice