無法在 Angular 中正確顯示 JSON 數據

Question

下面是成功獲取的JSON object。 第二個口袋包含兩個嵌套的 arrays。 我需要遍歷這些並在模板上顯示屬性。 這個 JSON object 被稱為政策。

{
  "0": {
    "id": "3",
    "first": "June",
    "last": "Cleaver"
  },
  "1": {
    "0": {
      "comp_url": "\/hvp",
      "comp_img": "..\/..\/assets\/images\/wind.png",
      "comp_name": "Healthy Vehicle Program"
    },
    "1": {
      "comp_url": "\/portal",
      "comp_img": "..\/..\/assets\/images\/wind.png",
      "comp_name": "Franchisee Portal"
    }
  }
}

這是有問題的 component.ts 文件。 專注於extractDashInfo() function。 我的想法是提取 JSON object 的第二個口袋，將其字符串化，然后使用split()將其轉換為 JS 數組，然后，我可以將其分配給this.componentData ，輸入到CompData Z20F35E630DAF399DFA8 最終顯示.

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { Policy } from '../../models/Policy';
import { CompData } from '../../models/CompData';

@Component({ ***omitted this code, not important*** })

export class DashComponent implements OnInit {
  policies: Policy[];
  jsonToString;
  stringToArray;
  componentData: CompData = {
    comp_url: '',
    comp_img: '',
    comp_name: ''
  }

  constructor (private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.readPolicies().subscribe((policies: Policy[])=>{
      this.policies = policies;
      this.extractDashInfo();
    });
  }

  extractDashInfo() {
    this.jsonToString = JSON.stringify(this.policies[1]);
    this.stringToArray = this.jsonToString.split('},');
    this.componentData = this.stringToArray;
  }
}

我在 IDE 中沒有構建錯誤或任何提示代碼錯誤的內容。 我所擁有的只是瀏覽器控制台中的錯誤。 但是，我使用isArray()來測試this.stringToArray是否確實是一個數組並且它是肯定的。 那么，為什么會出現錯誤？ 我不明白。 數組不是可迭代的嗎？ componentData也作為數組成功測試。

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

這是組件。html：

<div class="box-1" *ngFor="let comp of componentData">
  <h3>{{ comp.comp_name }}</h3>
</div>

這是 api.service.ts 上的 function 調用：

readPolicies(): Observable<Policy[]> {return this.httpClient.get<Policy[]>(`${this.PHP_API_SERVER}/read.php`);
}

這是 CompData.ts：

export interface CompData {
  comp_url: string;
  comp_img: string;
  comp_name: string;
}

在瀏覽器 window 中，我得到兩個空白行，所以ngIf似乎正在工作，我只是沒有顯示任何屬性。

Answer 1

我用extractDashInfo() function 走錯了方向。 我從@jonrsharpe 那里得到了一個間接的建議——我只是使用了Object.values function，我以前對此一無所知。

這段代碼：

componentData: CompData = {
  comp_url: '',
  comp_img: '',
  comp_name: ''
}

變成：

componentData;

誠實的努力，但考慮不周的 function extractDashInfo()更改為：

this.componentData = Object.values(this.policies[1]);

做到了，我的信息現在正確顯示在頁面上。