Typescript Angular material 无法显示通过API获取的数据

我正在try 创建一个以.Net Core为后端的棱角仪表板.我创建了两个组件Component1和Component2.当我try 通过API获取Component1中的数据时，它工作得很好，但当我try 对Component2执行相同的操作时，数据在前端不可见，但在控制台上显示.我不确定这里到底是什么问题.我正在为这个项目使用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);
      }
    );
   }
  }
}

数据将显示在控制台中