Angular：点击后如何重置区块数据？按钮消失问题求助

一、点击加载按钮后先清除旧数据 #

在触发数据加载的方法中，先清空现有数据，再发起异步请求：

• 在app.component.ts的loadData()方法开头，添加清空数据的代码：

loadData() {
  // 先清空旧数据
  this.data = [];
  // 再发起数据请求
  this.dataService.getData().subscribe(res => {
    this.data = res;
  });
}

这样用户点击按钮后，旧数据会立即被清空，直到新数据加载完成后才会重新渲染。

二、修复"Open card click"按钮消失的问题 #

检查按钮的显示逻辑，确保其不依赖于数据加载状态：

• 打开app.component.html，查看"Open card click"按钮的*ngIf条件，若当前绑定的是data.length这类和数据相关的变量，会导致数据清空时按钮消失。
• 修改为独立的控制变量，比如在组件中定义showOpenButton = true;，然后按钮的*ngIf绑定这个变量：

<button *ngIf="showOpenButton" (click)="openCard()">Open card click</button>

• 若需要在特定场景下隐藏按钮，再通过业务逻辑修改showOpenButton的值，而非绑定数据数组的状态。

内容的提问来源于stack exchange，提问作者Fama