Angular使用HttpClient subscribe请求后仅单条数据渲染如何解决

1. 循环变量作用域问题：你在for-of循环中使用var声明val变量，var不存在块级作用域，所有循环迭代共享同一个val变量。当异步的subscribe回调触发时，整个循环已经执行完毕，val最终会被赋值为this.dataArray的最后一个元素也就是delta，导致所有接口返回的结果都被存入了this.dataResults.delta，其余三个key没有对应数据，自然无法渲染。
2. 模板语法错误：cron对应渲染行的date管道参数多了一个多余的双引号，会导致模板解析异常，也会阻塞对应内容的渲染。
3. 可选：对象新增属性未触发变更检测：如果this.dataResults初始化时没有预定义cron/export/import/delta四个key，直接动态添加属性可能不会触发Angular变更检测，导致视图无法感知到数据更新。

1. 修复循环变量作用域 #

把循环中的var替换为let，let支持块级作用域，每次循环的val都是独立变量，回调中可以正确拿到当前迭代的key值：

// 替换前
for (var val of this.dataArray) {
// 替换后
for (let val of this.dataArray) {

2. 修复模板语法错误 #

删除cron行date管道多余的双引号：

<!-- 替换前 -->
<div mat-line *ngIf='getTimestamp("cron"); else loading;'>Zuletzt beendet: {{ getTimestamp("cron") | date:'dd.MM.yyyy HH:mm" }} Uhr</div>
<!-- 替换后 -->
<div mat-line *ngIf='getTimestamp("cron"); else loading;'>Zuletzt beendet: {{ getTimestamp("cron") | date:'dd.MM.yyyy HH:mm' }} Uhr</div>

3. 可选：优化变更检测触发 #

方式一：预定义dataResults的所有key #

初始化时就声明所有要用到的属性，保证属性更新可以被变更检测捕获：

// 组件声明dataResults时
dataResults: Record<string, StatusInterface | null> = {
  cron: null,
  export: null,
  delta: null,
  import: null
}

方式二：手动触发变更检测 #

导入ChangeDetectorRef，在赋值完成后调用detectChanges()主动通知视图更新：

// 组件构造函数注入
constructor(private cdr: ChangeDetectorRef) {}

// subscribe回调中赋值后加一行
this.dataResults[val] = data;
this.cdr.detectChanges(); // 新增行

额外bug修复（不影响当前渲染但建议修改） #

错误处理中error.status = 200是赋值操作，会导致逻辑判断错误，改为全等判断：

// 替换前
} else if ((error.status = 200)) {
// 替换后
} else if (error.status === 200) {

内容的提问来源于stack exchange，提问作者Henning Möllendorf