為什么這個*ngFor物件串列只有一些值而不是其他值？

我正在開發一個 MEAN 應用程式。在后端，我們有 mongoDB 集合用戶、簡歷、經驗。這些相互建立，所以用戶有簡歷，簡歷有經驗。還有一個 API 可以執行各種任務，例如添加簡歷、添加經驗、獲取所有經驗等。

在前端，我使用 angular 和 node（以及引導程式）來顯示資訊并添加 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 }} 或雇主或描述的內容，它只會顯示兩個空框。我已經用 insomnia 測驗了 API 呼叫，回應中回傳了三個檔案。如果您還有什么需要了解的，請告訴我，感謝您的幫助。

編輯 1：這是從 Insomnia 中檢索到的 API 的 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 鏈接看到的：

[{"_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}]

uj5u.com熱心網友回復：

感謝您添加收到的 JSON。

基于此，您會得到兩個正確的物件。

當您列印{{ experience }}該物件時，javascript 將呈現為[Object object]. 可以通過json管道查看所有內容{{ experience | json }}

最后一點，為什么沒有顯示某些欄位......再次在您收到的 JSON 上回答：結構與您期望的不同。

標籤：javascript html 节点.js 有角的

上一篇：css網格網頁-顯示平面網格而不是預期的正方形

下一篇：如何在python中提取兩個字符之間的子字串？