如何在 Angular 10 的 HTML 表格中显示 JSON答案

【问题标题】：How to show JSON in HTML table on Angular 10如何在 Angular 10 的 HTML 表格中显示 JSON
【发布时间】：2021-02-08 03:00:09
【问题描述】：

我正在尝试在 Angular 10 上的 HTML 表中显示数据，但收到此错误 Error trying to diff '[object Object]'. Only arrays and iterables are allowed。我在下面有这个 JSON：

{
    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "petr4.SA",
        "3. Last Refreshed": "2020-10-23",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2020-10-23": {
            "1. open": "20.9400",
            "2. high": "21.1400",
            "3. low": "20.5400",
            "4. close": "20.5700",
            "5. volume": "61328500"
        },
        "2020-10-22": {
            "1. open": "20.1000",
            "2. high": "20.8400",
            "3. low": "20.0500",
            "4. close": "20.8400",
            "5. volume": "98359400"
        }
}

我的模型课：

export class Candle{
    date: Date;
    open: string;
    high: string;
    low: string;
    close: string;
    volume: string;
}

我的服务等级：

export class CandleService {

  constructor(
    public http: HttpClient
  ) { }

  findAll(): Observable<Candle[]>{
    return this.http.get<Candle[]>(`${API_CONFIG.baseUrl}`);
  }
}

最后是 HTML：

<div class="container-analyzer">
    <table>
        <thead>
          <th>Date</th>
          <th>Open</th>
          <th>High</th>
          <th>Low</th>
          <th>Close</th>
          <th>Volume</th>
        </thead>
        <tbody *ngFor="let candle of ativoData">
            <tr>
                <td>{{candle.data}}</td>
                <td>{{candle.open}}</td>
                <td>{{candle.high}}</td>
                <td>{{candle.low}}</td>
                <td>{{candle.close}}</td>
                <td>{{candle.volume}}</td>
            </tr>
        </tbody>
      </table>
</div>

【问题讨论】：

这里的错误看起来很简单；您的数据既不是数组也不是可迭代的。
因为ngFor中的“只允许数组和可迭代”

标签： angular angular-directive

【解决方案1】：

您需要一个函数来将您的数据转换为一个数组，以便它可以显示在模板上。

这样写一个函数

  transformData(rawData: any) {
    let processedData: Array<Candle> = [];
    Object.keys(rawData["Time Series (Daily)"] || []).forEach(key => {
      processedData.push({
        date: new Date(key),
        open: rawData["Time Series (Daily)"][key]["1. open"],
        high: rawData["Time Series (Daily)"][key]["2. high"],
        low: rawData["Time Series (Daily)"][key]["3. low"],
        close: rawData["Time Series (Daily)"][key]["4. close"],
        volume: rawData["Time Series (Daily)"][key]["5. volume"]
      });
    });
    return processedData;
  }

并在从服务接收到数据后调用它

类似

this.ativoData = this.transformData(this.rawData);

在庙里

<div class="container-analyzer">
    <table>
        <thead>
            <th>Date</th>
            <th>Open</th>
            <th>High</th>
            <th>Low</th>
            <th>Close</th>
            <th>Volume</th>
        </thead>
        <tbody *ngFor="let candle of ativoData">
            <tr>
                <td>{{candle.date | date}}</td>
                <td>{{candle.open}}</td>
                <td>{{candle.high}}</td>
                <td>{{candle.low}}</td>
                <td>{{candle.close}}</td>
                <td>{{candle.volume}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是一个有效的sample

【讨论】：

【解决方案2】：

您可以使用 Mat-Angular（材料设计组件）表 (https://material.angular.io/components/table/overview) 来构建您的表，而不是编写复杂的代码。您可以轻松地操作要在屏幕上显示的数据。

【讨论】：

这个“复杂代码”如何？除了即使使用您建议的这个库，同样的问题仍然存在；数据不在数组中。

【解决方案3】：

我没有看到 ativoData 定义，即使是，它也不是数组也不是可迭代的。

您需要获取"Time Series (Daily)" 对象的值并将其转换为数组（您可以使用Object.entries() 来执行此操作）并将其存储到值ativoData 中。

然后，在 HTML 中的 *ngFor 中，您还需要定义索引以访问每个日期。基本上，它看起来像*ngFor="let candle of ativoData; index as i"。

最后，在使用给定索引进行插值时，您可以访问如下所示的每个值：

{{candle[i]}} // this will give you the date
{{candle[i].open}} // now you can access each value of the date
{{candle[i].high}}
{{candle[i].low}}
.
.
.
so on and so forth

【讨论】：