Angular 16中如何临时移除按钮内图标（仅在PrimeNG加载Spinner显示时移除）

嘿，我来帮你搞定这个问题！其实不用写专门的rm()函数，用Angular的数据驱动思路就能优雅解决，而且完美契合PrimeNG的loading状态逻辑，还不用手动折腾DOM哦～

最佳方案：用*ngIf结合loading变量控制图标显示 #

你已经在按钮上绑定了[loading]="loading"，这个变量正好可以用来控制图标的显示/隐藏，完全不用额外写删除函数：

1. 修改模板代码：给图标加上*ngIf="!loading"，这样当loading为true（Spinner显示）时，图标自动隐藏；loading变回false时，图标自动恢复：

<p-button label="" [loading]="loading" (onClick)="load()">
  <!-- 只有当非加载状态时才显示图标 -->
  <i *ngIf="!loading" class="pi pi-user-plus"></i>
</p-button>

2. 优化组件里的load()函数：确保loading状态在请求开始和结束时正确切换（不管请求成功还是失败，都要把loading改回false，这样图标才能恢复）：

loading = false;

load() {
  // 开始加载：显示Spinner，隐藏图标
  this.loading = true;

  // 模拟你的异步操作（比如HTTP请求）
  this.yourService.doSomeAsyncTask().subscribe({
    next: (response) => {
      // 处理请求成功的逻辑
    },
    error: (error) => {
      // 处理请求失败的逻辑
    },
    complete: () => {
      // 请求结束（无论成败）：隐藏Spinner，恢复图标
      this.loading = false;
    }
  });
}

为什么不推荐手动删除DOM元素？ #

你之前说“只会永久删除”，其实就算用原生JS把元素删掉，之后还要手动重新创建，不仅麻烦，还会绕过Angular的变更检测机制，容易出现状态不一致的问题。用*ngIf是Angular的标准做法，代码更简洁也更易维护。

如果你非要用DOM操作（不推荐） #

如果因为某些特殊情况必须手动控制，可以通过隐藏元素（而非删除）来实现临时移除：

rm() {
  const iconEl = document.getElementById('rm_icon');
  if (iconEl && this.loading) {
    // 隐藏图标
    iconEl.style.display = 'none';
  }
}

// 记得在loading结束后恢复图标
restoreIcon() {
  const iconEl = document.getElementById('rm_icon');
  if (iconEl) {
    iconEl.style.display = 'inline-block'; // 图标默认是行内块元素
  }
}

然后在load()函数的complete回调里调用restoreIcon()，但还是那句话，这种方法远不如*ngIf优雅。

另外提醒一下：你原来的按钮绑定了两个(onClick)事件，Angular里这样写只会生效最后一个，正确的写法是在一个事件里调用多个函数：(onClick)="load(); rm()"，不过用了*ngIf之后连这个都不用了～

备注：内容来源于stack exchange，提问作者yahya