Zone Aware Promise返回数据正常但前端视图未渲染问题咨询

核心问题与修复方案 #

1. 模板变量引用错误（首要原因）

你在ngFor循环中声明了单个元素的变量名为status，但模板绑定属性时错误使用了数组变量statuses，数组本身没有ConfigName属性，自然无法渲染出数据，将绑定变量改为单个元素的status即可。

2. 冗余请求与生命周期优化

你原代码在ngAfterViewInit中发起了两次重复的get请求（一次在console.log中，一次是单独调用），属于不必要的资源浪费；且ngAfterViewInit是视图首次渲染完成后才触发的生命周期钩子，异步赋值容易触发变更检测警告，建议将请求逻辑移到ngOnInit中。

3. 可选：变更检测适配

如果你的组件启用了ChangeDetectionStrategy.OnPush变更检测策略，异步赋值后需要手动触发变更检测，才能让视图更新。

修正后代码 #

视图代码

<table class="adminConfig-settings-list  table">
    <thead>
        <tr>
            <td>Name</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let status of statuses">
            <td>
                <b>{{status.ConfigName}}</b>
            </td>
            <td>
                {{status.ConfigSetting}}
            </td>
        </tr>
    </tbody>
</table>

index.ts代码

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
// 引入你的DataService和AdminConfigModel定义

@Component({
  // 你的组件配置
})
export class 你的组件名 implements OnInit {
  statuses: AdminConfigModel[] = [];

  constructor(
    private dataService: DataService,
    // 未使用OnPush策略可删除下一行
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.dataService.get().then(x => {
      this.statuses = x;
      // 未使用OnPush策略可删除下一行
      this.cdr.detectChanges();
    });
  }
}

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