Angular 8中点击按钮用splice每次移除数组首个对象失效问题

嘿，我一眼就发现问题所在啦！你现在的代码里，每次点击按钮调用clickhere函数时，都会重新创建一个全新的arraydata数组——这意味着每次点击都是在处理一个刚初始化的完整数组，而不是之前已经删掉过元素的那个数组，所以看起来只有第一次点击生效。

要解决这个问题，你只需要把数组定义成组件的类实例属性，而不是函数内部的局部变量。这样数组的状态会在组件的整个生命周期中保留，每次点击都是操作同一个数组实例。

修改后的app.component.ts #

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  // 将数组定义为组件的实例属性，持久化保存状态
  arraydata = [
    { name: "name1", value: 1 },
    { name: "name2", value: 2 },
    { name: "name3", value: 3 }
  ];
  
  ngOnInit() {}

  clickhere() {
    // 增加判断，避免数组为空时执行splice报错
    if (this.arraydata.length > 0) {
      this.arraydata.splice(0, 1);
      console.log(this.arraydata);
    } else {
      console.log("数组已经没有元素可以移除啦！");
    }
  }
}

可选：在页面展示数组状态（app.component.html） #

如果你想在页面上直观看到数组的变化，可以给HTML加一行展示代码：

<button type="button" (click)="clickhere()">Click Me!</button>
<!-- 用json管道格式化展示当前数组 -->
<p>当前数组内容：{{ arraydata | json }}</p>

关键修改说明 #

• 把arraydata从clickhere函数内部移到类的顶层，作为组件的属性，这样它的状态会在组件存活期间一直保留，每次点击都是操作同一个数组。
• 增加了数组长度判断，防止数组为空时调用splice出现不必要的错误，提升代码健壮性。

内容的提问来源于stack exchange，提问作者anguler-developer