Angular Material组件无法渲染API获取数据问题求助

我正在开发一个以.Net Core为后端的Angular仪表盘，已创建component1和component2两个组件。component1通过API获取的数据可正常展示，但component2（LabourChargeType组件）获取的数据能在控制台打印，却无法在前端页面渲染，项目使用Angular Material，请求排查问题。

相关代码文件 #

labour-charge-type.service.ts #

import { Injectable } from '@angular/core';
import { LabourChargeType } from '../models/labour-charge-type';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class LabourChargeTypeService {
  private url="LabourChargeType";

  constructor(private http:HttpClient ) { }
  public getLabourChargeType():Observable<LabourChargeType[]>{
    return this.http.get<LabourChargeType[]>(`${environment.apiUrl}/${this.url}`);
  }
}

labour-charge-type.component.html #

<div class="maindiv">
    <div class="row ">
        <div class="col-md-12">
            <h3>Labour Charge Type</h3>
        </div>
    </div>
    <div>
        <hr>
    </div>
    <div class="table-container">
        <table class="custom-table">
            <thead>
                <tr>
                    <th class="custom-header">Name</th>
                    <th class="custom-header">Code</th>
                    <th class="custom-header">Status</th>
                    <th class="custom-header">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr class="table-row" *ngFor="let cs of labourchargetype">
                    <td class="table-data">{{ cs.LabourChargeTypeName }}</td>
                    <td class="table-data">{{ cs.LabourChargeTypeCode }}</td>
                    <td class="table-data">{{ cs.LabourChargeTypestatus }}</td>
                    <td class="table-data">
                        <button class="edit-button">Edit</button>
                        <button class="delete-button">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>        
    </div>
</div>

labour-charge-type.component.ts #

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { LabourChargeType } from 'src/app/models/labour-charge-type';
import { LabourChargeTypeService } from 'src/app/services/labour-charge-type.service';

@Component({
  selector: 'app-labour-charge-type',
  templateUrl: './labour-charge-type.component.html',
  styleUrls: ['./labour-charge-type.component.scss']
})
export class LabourChargeTypeComponent implements OnInit {
  labourchargetype: LabourChargeType[] = [];
  constructor(private router: Router, private dialog: MatDialog, private labourChargeTypeService: LabourChargeTypeService) {}

  ngOnInit(): void {
    this.labourChargeTypeService.getLabourChargeType()
    .subscribe(
      (labourcharget: LabourChargeType[]) => {
        console.log('API Response:', labourcharget);
        this.labourchargetype = labourcharget;
      },
      error => {
        console.error('Error fetching data:', error);
      }
    );
   }
}

排查步骤 #

• 核对字段名大小写与拼写：对照控制台打印的API返回数据，确认模板中使用的属性名（如cs.LabourChargeTypeName）和返回字段完全一致，注意大小写和拼写差异。
• 确认变更检测触发：若数据更新未触发Angular变更检测，可手动引入ChangeDetectorRef并调用detectChanges()方法：

  import { ChangeDetectorRef } from '@angular/core';
  // 构造函数注入
  constructor(private cdr: ChangeDetectorRef, ...) {}
  // 赋值后调用
  this.labourchargetype = labourcharget;
  this.cdr.detectChanges();
  

• 验证数组赋值结果：在赋值语句后添加console.log('Component data:', this.labourchargetype);，确认组件内的数组已正确接收API数据。
• 检查模板语法与样式：确认*ngFor指令绑定的数组名无拼写错误；通过浏览器开发者工具检查表格元素是否被CSS样式隐藏（如display: none）。
• 核对模型类定义：确保LabourChargeType模型的属性名与API返回字段完全匹配，避免因属性不匹配导致数据无法正确映射。

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