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

问题描述

我正在尝试在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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-directive