通過完全動態呈現表格來解決空物件問題-有解無憂

我想要實作的是基于 JSON 動態呈現表頭、行和單元格，并通過 API 呼叫檢索。我從 API 獲得的資料是一個資料框。

這是 json'd 資料框（來自控制臺）：

0: {Close: 2918.1, DateTime: '2022-02-17T19:08:00 00:00', High: 2920.2, Low: 2915.5, Open: 2917.3, …}
1: {Close: 2909.6, DateTime: '2022-02-17T19:09:00 00:00', High: 2918.1, Low: 2908.8, Open: 2918.1, …}
2: {Close: 2906, DateTime: '2022-02-17T19:10:00 00:00', High: 2910.2, Low: 2906, Open: 2909.6, …}
3: {Close: 2907.3, DateTime: '2022-02-17T19:11:00 00:00', High: 2910.3, Low: 2905.9, Open: 2906, …}
4: {Close: 2903, DateTime: '2022-02-17T19:12:00 00:00', High: 2907.6, Low: 2902.6, Open: 2907.3, …}
5: {Close: 2903.7, DateTime: '2022-02-17T19:13:00 00:00', High: 2906.9, Low: 2903, Open: 2903, …}
6: {Close: 2909.7, DateTime: '2022-02-17T19:14:00 00:00', High: 2909.7, Low: 2903.7, Open: 2903.7, …}
7: {Close: 2904.8, DateTime: '2022-02-17T19:15:00 00:00', High: 2909.7, Low: 2895.8, Open: 2909.7, …}
8: {Close: 2909.2, DateTime: '2022-02-17T19:16:00 00:00', High: 2911.9, Low: 2904.4, Open: 2904.8, …}
9: {Close: 2910.1, DateTime: '2022-02-17T19:17:00 00:00', High: 2916.2, Low: 2909.2, Open: 2909.2, …}
10: {Close: 2908.4, DateTime: '2022-02-17T19:18:00 00:00', High: 2912.7, Low: 2908, Open: 2909.8, …}
11: {Close: 2904.7, DateTime: '2022-02-17T19:19:00 00:00', High: 2908.7, Low: 2902.9, Open: 2908.4, …}
12: {Close: 2911.9, DateTime: '2022-02-17T19:20:00 00:00', High: 2912.3, Low: 2904.7, Open: 2904.7, …}
13: {Close: 2908.5, DateTime: '2022-02-17T19:21:00 00:00', High: 2912, Low: 2908.2, Open: 2911.9, …}
14: {Close: 2905.8, DateTime: '2022-02-17T19:22:00 00:00', High: 2908.5, Low: 2902.7, Open: 2908.5, …}
15: {Close: 2897.7, DateTime: '2022-02-17T19:23:00 00:00', High: 2905.8, Low: 2897.7, Open: 2905.8, …}
16: {Close: 2896.7, DateTime: '2022-02-17T19:24:00 00:00', High: 2898.7, Low: 2892.2, Open: 2897.7, …}
17: {Close: 2903.2, DateTime: '2022-02-17T19:25:00 00:00', High: 2904, Low: 2894.9, Open: 2896.7, …}
18: {Close: 2902.1, DateTime: '2022-02-17T19:26:00 00:00', High: 2904.2, Low: 2901.4, Open: 2903.2, …}
19: {Close: 2902, DateTime: '2022-02-17T19:27:00 00:00', High: 2904.1, Low: 2900, Open: 2902.1, …}

組件.html：

  <thead>
      <tr>
        <th *ngFor="let key of tabKey">{{key}}</th>
      </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of df_array">{{row}}
      <td *ngFor="let key of tabKey; let j = index">{{df_array[j]}}</td>

    </tr>
  </tbody>

這里我為 tabKey 和 tabVal 賦值：

Initdf() {
    this.restService.postTickerGetDf().subscribe((response) => {
      this.df_array = response;
      this.df_array.forEach((element:any) => {
          this.tabKey = Object.keys(element); 
          this.tabVal.push(Object.values(element));
      });
    });

不幸的是，我在頁面上的資料框如下所示：

Close   DateTime    High    Low Open    volume
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]

為什么沒有值以及如何解決這個問題？

更新：

這是介面 DfInit：

export interface DfInit {
    DateTime: string;
    Close: number;
    High: number;
    Low: number;
    Open: number;
    volume: number;
      
}

df_array 型別：

df_array: DfInit[] = [];

uj5u.com熱心網友回復：

你為什么顯示{{row}}。此外，您需要告訴物件您要顯示{df_array[j]}}的屬性只是設定索引，但您還必須使用key您獲取的來顯示其值，即{ key value }pair 另外，我認為index應該從中使用outer loop，以便index僅用于獲取該行

您的 HTML 應如下所示：

<thead>
  <tr>
    <th *ngFor="let key of tabKey">{{ key }}</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let row of df_array; let i = index">
    <td *ngFor="let key of tabKey">
      {{ df_array[i][key] }}
    </td>
  </tr>
</tbody>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/427226.html

標籤：有角度的

上一篇：嘗試加載.json時Angular出現錯誤TS2740

下一篇：按Ctrl P時阻止顯示列印對話框