Angular调用Service的refreshList返回undefined 如何实现页面数据渲染

• 异步请求时序问题：refreshList中的HTTP请求是异步操作，调用后不会立刻给service.list赋值，模板初始渲染时service.list为undefined，*ngFor无法遍历undefined类型
• 模板属性名大小写不匹配：Logdetay模型中定义的字段是LogType，但模板中写的是Logtype，大小写不一致会导致取值为空
• toPromise()在Angular新版本（RxJS 7+）中已被废弃，写法不规范，且没有错误捕获逻辑，请求失败时会静默报错
• service中的list属性没有初始值，默认是undefined，遍历会触发控制台报错

1. 修改logdetay.service.ts #

import { Injectable } from '@angular/core';
import { Logdetay } from './logdetay.model';
import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LogdetayService {

  formData:Logdetay={
    Message: null,
    CreateDate: null,
    LogType: null,
    Int: null
  };

  readonly rootUrl='https://localhost:44370/api';
  // 初始赋值为空数组，避免遍历undefined报错
  list : Logdetay[] = [];
  constructor(private httpclient:HttpClient) { }

  postlogDetay(formData:Logdetay){
    return this.httpclient.post(this.rootUrl+'/Logtbs',formData);
  }
  // 修改为返回Observable，增加类型指定
  refreshList(): Observable<Logdetay[]> {
    return this.httpclient.get<Logdetay[]>(this.rootUrl + '/Logtbs')
      .pipe(
        tap(res => this.list = res)
      );
  }
}

2. 修改logdetay-liste.component.ts #

import { Component, OnInit } from '@angular/core';
import { Logdetay } from 'src/app/paylas/logdetay.model';
import { LogdetayService } from 'src/app/paylas/logdetay.service';

@Component({
  selector: 'app-logdetay-liste',
  templateUrl: './logdetay-liste.component.html',
  styles: []
})
export class LogdetayListeComponent implements OnInit {

  constructor(private service : LogdetayService) {  }
  ngOnInit() {
     // 订阅请求结果，添加错误处理逻辑
     this.service.refreshList().subscribe({
      error: (err) => console.error('日志列表请求失败：', err)
     });
  }
}

3. 修改logdetay-liste.component.html #

<table class="table table-hover">
  <!-- 增加无数据提示 -->
  <tr *ngIf="service.list.length === 0">
    <td colspan="2" class="text-center">暂无日志数据</td>
  </tr>
  <tr *ngFor="let pd of service.list">
    <td >{{pd.Message}}</td>
    <!-- 修正字段大小写，和模型保持一致 -->
    <td >{{pd.LogType}}</td>
  </tr>
</table>

确认后端接口/Logtbs返回的字段名和Logdetay模型完全匹配，大小写也要对应，如果后端返回的是小写开头字段，需要同步修改模型定义。

内容的提问来源于stack exchange，提问作者Orhan OSMANAĞAOĞLU