为什么 ngFor 对象列表会忽略某些值？

Question

我正在开发一个 MEAN 应用程序。在后端，我们有 mongoDB 集合用户、简历和经验。这些相互建立，因此用户有简历，简历有经验。还有一个 API 可以执行各种任务，例如添加简历、添加经验、获取所有经验等。

在前端，我使用 angular 和节点（以及 bootstrap）来显示信息并添加 GUI 功能。所以我在体验模型中有这段代码：

class ExperienceModel {
    _id!: string;
    _userId!: string;
    _resumeId!: string;
    employer!: string;
    monthStart!: string;
    yearStart!: string;
    monthEnd!: string;
    yearEnd!: string;
    title!: string;
    description!: string;
}

export default ExperienceModel;

并且在主要组件屏幕 ts 文件中我声明了 experiences: ExperienceModel[] = []; 并且在 ngOnInit 中这个代码块：

if (this.userId && this.resumeId) {
          this.experienceService.getExperiences(this.userId, this.resumeId).subscribe(
            (allExperiences: ExperienceModel[]) => { this.experiences = allExperiences }
          );
        }

最后，在主要组件屏幕的 html 文件中，我使用 *ngFor 循环填充列表：

<a style="cursor: pointer" 
   *ngFor="let experience of experiences"
   class="list-group-item d-flex justify-content-between align-items-center">
       {{ experience }}
   <span (click)="deleteExperience(experience)" class="badge bg-danger rounded-pill">x</span>
</a>

现在，问题是，列表显示了两个东西，每个看起来都像 [Object object]，尽管集合中有三个经验文件。除此之外，如果我输入类似 {{ experience._id }} 或 _userId 或 _resumeId 的内容，它会起作用，如果我输入类似 {{ experience.title }} 或雇主或描述的内容，它只会显示两个空的盒子。我已经测试了失眠的 API 调用，响应中返回了三个文件。如果您还有其他需要了解的信息，请告诉我，感谢您的帮助。

编辑 1：这是 API 在 Insomnia 中检索到的 JSON：

[
  {
    "_id": "61841026178ac959d07f80df",
    "_userId": "61705675ab8731ad3a794751",
    "_resumeId": "617057308799dd688b117ce3",
    "employer": "Some company",
    "monthStart": "03",
    "yearStart": "2021",
    "monthEnd": "06",
    "yearEnd": "2021",
    "title": "Director of Awesome",
    "description": "Coolest guy on staff, had to make sure everyone else was cool too",
    "__v": 0
  },
  {
    "_id": "6184119e178ac959d07f810f",
    "_userId": "61705675ab8731ad3a794751",
    "_resumeId": "617057308799dd688b117ce3",
    "employer": "Some other company",
    "monthStart": "05",
    "yearStart": "2020",
    "monthEnd": "09",
    "yearEnd": "2020",
    "title": "Director of Cool",
    "description": "Phatest b-boi on staff, had to make sure everyone was kicking it with funky rythms",
    "__v": 0
  },
  {
    "_id": "618411cd178ac959d07f8112",
    "_userId": "61705675ab8731ad3a794751",
    "_resumeId": "617057308799dd688b117ce3",
    "employer": "test",
    "monthStart": "05",
    "yearStart": "2020",
    "monthEnd": "09",
    "yearEnd": "2020",
    "title": "Director of Cool",
    "description": "Phatest b-boi on staff, had to make sure everyone was kicking it with funky rythms",
    "__v": 0
  }
]

这是我在浏览器中通过 API link 看到的内容：

[{"_id":"61718f3e0624ec1944bde7fa","_userId":"61705675ab8731ad3a794751","_resumeId":"6170b39b0624ec1944bde78b","experience":{"monthStart":"10","yearStart":"2020","monthEnd":"03","yearEnd":"2021","title":"Director of Cool","description":"Coolest guy on staff, had to make sure everyone else was cool too"},"__v":0},{"_id":"61718f510624ec1944bde7fc","_userId":"61705675ab8731ad3a794751","_resumeId":"6170b39b0624ec1944bde78b","experience":{"monthStart":"03","yearStart":"2021","monthEnd":"06","yearEnd":"2021","title":"Director of Awesome","description":"Coolest guy on staff, had to make sure everyone else was cool too"},"__v":0}]

Answer 1

感谢您添加收到的 JSON。

基于此，您得到两个个正确的对象。

当您打印 {{ experience }} 时，对象 javascript 将呈现为 [Object object]。您可以使用 json 管道 {{ experience | json }}

查看所有内容

最后一点，为什么有些字段没有显示...再次在您收到的 JSON 中得到回答：结构与您预期的不同。

Answer 2

在您从API收到的json中，有一个额外的经验对象在里面。看图。

你可以在模板中这样使用

 <a style="cursor: pointer" 
   *ngFor="let experience of experiences"
   class="list-group-item d-flex justify-content-between align-items-center">
       {{ experience.experience.title }}
   <span (click)="deleteExperience(experience)" class="badge bg-danger rounded-pill">x</span>
</a>

为什么 ngFor 对象列表会忽略某些值？

Why is ngFor object list ignoring certain values?

html

javascript

node.js

ngfor

angular