Angular API返回数据控制台可打印但HTML页面不展示如何解决

1. 模板语法优化（非核心但建议调整） #

当前你将*ngFor指令写在<ul>标签上，会循环生成多个独立列表，若要生成单个列表下的多条数据，建议调整为循环<li>标签：

<ul>
  <li *ngFor="let item of appSetting">{{item.name}}</li>
</ul>

2. 变更检测未触发（最常见原因） #

如果你的组件配置了ChangeDetectionStrategy.OnPush变更检测策略，异步请求完成后的赋值不会自动触发视图更新，需要手动通知Angular刷新视图。
修改component.ts代码：

// 顶部导入ChangeDetectorRef
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

export class AuthComponent implements OnInit {
  appSetting: AppSetting[] = [];
  // 构造函数注入ChangeDetectorRef
  constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}

  async ngOnInit() {
    await this.AppSetting().then((result: AppSetting[]) => {
      this.appSetting = result;
      // 手动标记组件需要变更检测
      this.cdr.markForCheck();
    });
    console.log(this.appSetting);
  }

  // 其余代码保持不变
}

3. 前后端字段名大小写不匹配 #

控制台打印的数组数据展开后，检查每个对象的属性名是否和模板中写的name完全一致，若后端返回的是大驼峰Name或者其他拼写，模板取值会为空。
可以在请求阶段做字段映射适配：

async AppSetting() {
  const res = await this.http
    .get<any[]>(environment.apiUrl + '/AppSetting/GetsPublich')
    .toPromise();
  return res.map(item => ({
    // 此处根据后端实际返回的字段名调整映射逻辑
    name: item.Name
  })) as AppSetting[];
}

4. 废弃API导致的异步异常 #

Angular 12+配套的RxJS 7+版本中，toPromise()方法已经被废弃，部分场景下会出现异步逻辑执行异常，建议替换为官方推荐的firstValueFrom：

// 顶部导入firstValueFrom
import { firstValueFrom } from 'rxjs';

async AppSetting() {
  return await firstValueFrom(
    this.http.get<AppSetting[]>(environment.apiUrl + '/AppSetting/GetsPublich')
  );
}

快速调试方法 #

在模板顶部加入调试代码，快速定位问题：

<!-- 若显示长度为0：优先排查变更检测问题 -->
<!-- 若显示长度正确但列表空白：优先排查字段名/类型定义问题 -->
<div>当前数组长度：{{appSetting?.length}}</div>
<ul>
  <li *ngFor="let item of appSetting">{{item.name}}</li>
</ul>
<router-outlet></router-outlet>

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