Angular4+Node.js项目中如何用Observables实时更新表格单列状态

嘿，我来帮你搞定这两个头疼的问题，咱们逐个分析解决：

问题1：轮询时持续显示加载状态，频繁刷新干扰表格展示 #

原因分析 #

你当前用Observable.interval(15000)直接订阅发起请求，存在两个核心问题：

1. 如果前一次接口请求还没完成，下一次轮询又会发起新请求，导致多个请求并发，loading状态被频繁切换为true，看起来就一直在加载；
2. 没有清理订阅，组件销毁后轮询还会继续，造成内存泄漏。

解决方案 #

用switchMap操作符取消前一次未完成的请求，确保同一时间只有一个请求在进行，同时在组件销毁时清理订阅：

首先，在组件里导入必要的模块和操作符：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import 'rxjs/add/operator/switchMap'; // Angular4对应RxJS5的导入方式

然后修改组件类，实现OnDestroy并管理订阅：

export class MasterInterfaceComponent implements OnInit, OnDestroy {
  loading = false;
  records: any[];
  result: any[];
  private subscription: Subscription; // 保存订阅对象，用于销毁时清理

  ngOnInit() {
    console.log("beginning of func");
    this.subscription = Observable.interval(15000)
      .switchMap(() => { // 用switchMap取消前一次未完成的请求
        this.loading = true;
        const url = config.url;
        const port = config.port;
        // 补全你的请求参数和headers
        return this.http.post(`http://${url}:${port}/your-api-endpoint`, {}, {
          headers: new Headers({ 'Token': 'your-token-value' })
        })
        .map(result => result.json());
      })
      .subscribe(
        res => {
          this.loading = false;
          this.records = res;
          this.result = res;
          console.log("接口返回数据: ", res);
        },
        error => {
          this.loading = false; // 请求失败也要关闭加载状态
          console.error("请求出错: ", error);
        }
      );
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，停止轮询
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  // 保留你的forUpdate等其他方法
  forUpdate(data: any) {
    // 你的逻辑
  }
}

这样修改后，每次轮询都会取消前一次未完成的请求，加载状态只会在请求发起时显示，完成后自动关闭，不会频繁刷新干扰表格展示。

问题2：所有表格条目仅显示绿色标识 #

原因分析 #

你用了activeRedColor和activeGreenColor这两个组件全局变量，当循环遍历数据时，最后一个条目的ACTIVE_YN值会覆盖这两个变量，导致所有行都使用最后一个条目的状态，自然就全是绿色了。

解决方案 #

直接在模板中根据当前行的data.ACTIVE_YN值来控制图标的显示，不需要全局变量，每行独立判断：

修改interface.component.html的最后一列：

<td>
  <!-- 当ACTIVE_YN为"Y"时显示绿色图标，否则隐藏 -->
  <img [hidden]="data.ACTIVE_YN !== 'Y'" src="你的绿色图标URL" width="10" height="10">
  <!-- 当ACTIVE_YN为"N"时显示红色图标，否则隐藏 -->
  <img [hidden]="data.ACTIVE_YN !== 'N'" src="你的红色图标URL" width="10" height="10">
  {{data.ACTIVE_YN}}
</td>

同时，你可以删掉组件里的activeCheck、activeValue、activeRedColor、activeGreenColor这些变量，简化代码结构。

最终效果 #

1. 轮询时只会在请求发起时显示加载状态，完成后自动关闭，不会频繁刷新；
2. 每行根据自己的ACTIVE_YN值显示对应的绿色/红色图标，不会出现全绿的情况。

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