Angular模板中如何展示逐步累加生成的动态数组内容

问题原因 #

Array.push() 方法的返回值是追加元素后的数组长度，不是修改后的数组本身，所以你当前的代码只会输出1、2、3...的长度值，而非完整数组。同时使用流外部的newArray变量属于副作用，不符合RxJS的响应式设计原则。

解决方案 #

使用RxJS内置的scan操作符实现流式累加，无需声明外部变量，状态全部封装在Observable内部：

1. 导入依赖 #

import { interval, take, scan } from 'rxjs';

2. 业务代码实现 #

const sourceArray = [1,2,4,6,9,10,8,9,6,5];
this.count$ = interval(1000).pipe(
  // 限制发射次数等于数组长度，避免下标越界
  take(sourceArray.length),
  // scan 用于流式累加，第一个参数为累加函数，第二个为初始值
  scan((accumulator, currentIndex) => {
    // 写法1：直接修改累加器返回（性能更高）
    accumulator.push(sourceArray[currentIndex]);
    return accumulator;
    // 写法2：返回新数组（无副作用，更符合纯函数原则，适配Angular变更检测）
    // return [...accumulator, sourceArray[currentIndex]];
  }, [] as number[])
);

3. 模板调整 #

如果需要直接展示数组的JSON格式，需要搭配Angular内置的JsonPipe，否则会默认调用数组的toString()方法显示为逗号分隔的字符串：

<!-- 展示完整数组格式 -->
<h2>{{ count$ | async | json }}</h2>

<!-- 如需自定义遍历展示元素，可以用ngFor -->
<h2>
  <ng-container *ngFor="let num of count$ | async">
    {{ num }}&nbsp;
  </ng-container>
</h2>

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