为什么 Angular 中 API 数据没有显示在正面？

Question

我正在使用 Angular 和 SpringBoot 创建一个全栈应用程序。我以前已经做过很多次此类项目，但我有一个简单的问题无法解决。

这里是 .ts 文件：

import { Component, OnInit } from '@angular/core';
import { ChestService } from '../chest.service';
import { Chest } from '../chest.model';
import { lastValueFrom } from 'rxjs';

@Component({
  selector: 'app-chest',
  templateUrl: './chest.component.html',
  styleUrls: ['./chest.component.scss']
})
export class ChestComponent implements OnInit {

  chests: Chest[] = [];

  constructor(private chestService: ChestService) {

  }

  async ngOnInit() {
    await this.getAllChests();
    console.log(this.chests)
  }

  async getAllChests() {
    const data = await lastValueFrom(this.chestService.getAllChests());
    this.chests = data;
  }
}

这里是 .html 文件：

<h1>Mes coffres</h1>
<ng-container *ngIf="chests && chests.length > 0">
  <div *ngFor="let chest of chests">
      <p>{{ chest.name }}</p>
  </div>
</ng-container>

和型号：

export class Chest {
    id ?: number;
    name ?: string;
    description ?: string;
    creationDate ?: string;
    username ?: string;
    password ?: string;
    link ?: string;
  
    constructor(id ?: number, name ?: string, description ?: string, creationDate ?: string, username ?: string, password ?: string, link ?: string) {
      this.id = id;
      this.name = name;
      this.description = description;
      this.creationDate = creationDate;
      this.username = username;
      this.password = password;
      this.link = link;
    }
  }

当我查看浏览器的网络选项卡时，我注意到对象是从 api 传输的。在 .ts 文件中，console.log(this.chests) 显示控制台中的对象。但是 ;html 文件只显示标签，我不明白为什么它不显示每个对象的名称。

有谁知道问题出在哪里吗？

Answer 1

问题已解决：后端对象的字段名称与前端对象的字段名称不同。