Angular表格行中如何仅展示并维护一次数据状态，避免值反复变化

问题根源 #

• 你的itemStateCssClass方法直接绑定在[ngClass]上，Angular每轮变更检测都会执行这个方法，导致每个商品ID反复触发接口请求
• 你用了全局变量this.statusUpdate存样式类，所有行共用这一个变量，不同请求的返回结果会互相覆盖，自然会出现状态反复横跳的情况
• 接口请求是异步的，方法执行时先返回了上一次的this.statusUpdate值，等接口返回后又更新变量触发重渲染，进一步加剧了状态闪烁

解决方案 #

第一步：提前预加载所有商品状态，给每个item单独挂载状态属性 #

不要在模板绑定的方法里发请求，在获取到itemArray之后，统一给每个商品查询状态，把状态存在商品对象自身的属性上，避免全局变量污染。
修改component.ts代码：

// 原有获取商品列表的逻辑执行成功后，补充下面的状态查询逻辑
getItemList() {
  // 这里保留你原来获取itemArray的代码，获取成功后执行下方逻辑
  this.itemArray[0].forEach(item => {
    this.service.itemIdForStatus(item.ItemId).subscribe((res: any) => {
      const status = res.payload.Status;
      // 直接把样式类挂在当前item对象上，每个item独立存储自己的状态
      switch (status) {
        case "notAvailable":
          item.statusClass = "fa fa-circle redColor";
          break;
        case "available":
          item.statusClass = "fa fa-circle greenColor";
          break;
        default:
          item.statusClass = "";
      }
    })
  })
}

// 删掉原来的itemStateCssClass方法，无需再使用

第二步：修改模板绑定，直接取item自身的状态属性 #

修改component.html中状态列的绑定逻辑：

<td>
  <i [ngClass]="item.statusClass" aria-hidden="true"></i> 
</td>

可选优化：需要实时更新状态的场景 #

如果商品状态需要定时刷新，不要在模板绑定里触发请求，统一设置全局定时任务批量刷新即可，同时注意组件销毁时清除定时器避免内存泄漏：

private statusTimer: any;

ngOnInit() {
  this.getItemList();
  // 每30秒刷新一次状态，可自行调整间隔时长
  this.statusTimer = setInterval(() => {
    this.getItemList();
  }, 30 * 1000)
}

ngOnDestroy() {
  if (this.statusTimer) {
    clearInterval(this.statusTimer);
  }
}

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