使用 Angular 7 显示 JSON 数据

Posted

技术标签:

【中文标题】使用 Angular 7 显示 JSON 数据【英文标题】:Displaying JSON Data Using Angular 7 【发布时间】:2019-07-12 09:00:07 【问题描述】:

我正在尝试从服务器显示此 JSON 数据:

"buySell":
[
  "date":"2015-03-02","close":120.351,"buySell":"Sell",
  "date":"2019-01-02","close":157.2455,"buySell":"Buy"
],

"firstReturn":0.62987323647548421,
"sell":"date":"2018-10-08","close":222.0396,
"buy":"date":"2018-05-02","close":173.9216

这就是我在 html 中的格式:

<mat-list *ngIf="buySellData$ | async as stock else noData">
   <mat-list-item *ngFor="let item of stock ">
       item.listOfBuySell | json 
   </mat-list-item>
</mat-list>

这是股票格式

stock: Cagr[];

而 carg.ts 是:

import  Istock  from './istock'
import  Dateclose  from './dateclose'

export class Cagr 
    listOfBuySell: Istock;
    close: number;
    sell: Dateclose;
    buy : Dateclose;
 

istock.ts 是:

 export class Istock 
    date: Date;
    close: number;
    buysell: string;

最后是 dateclose.ts

export class Dateclose 
    date: Date;
    close: number;

这是我在显示时遇到的错误:

错误:找不到不同的支持对象“[object Object]” 输入“对象”。 NgFor 仅支持绑定到 Iterables,例如 数组。

【问题讨论】:

你是否混淆了类和接口?类有构造函数。 【参考方案1】:

您正在尝试迭代 object 而不是 array。这会导致这样的错误。

您应该检查您在buySellData$ | async 中的确切结果。

【讨论】:

以上是关于使用 Angular 7 显示 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章

仅使用 Angular 7 将 json 数据写入本地 JSON 文件

使用来自本地 json 文件的 html 中的数据 - typescript, angular 7

Angular 8 使用正确的数据显示 HTTP 响应。 ([对象对象])[重复]

如何在 Angular 5 中显示来自 Json Mapper 的数据?

解析 JSON 并在 Angular 中显示数据

js:使用angular的http获取json数据