从后端返回的显示对象数据

时间:2019-05-18 17:04:22

标签: angular

我正在接收以下格式的对象数据:

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

export class Cagr {
    buySell: Istock;
    firstReturn: 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;

}

这是我从控制台日志窗口中打印的服务器获取的格式:

buy: {date: "2019-01-02T00:00:00", close: 156.6423}
buySell: Array(6)
0: {date: "2015-06-02T00:00:00", close: 121.2015, buySell: "Sell"}
1: {date: "2015-06-03T00:00:00", close: 121.3507, buySell: "Sell"}
2: {date: "2015-11-11T00:00:00", close: 109.2406, buySell: "Sell"}
3: {date: "2016-01-22T00:00:00", close: 95.4197, buySell: "Buy"}
4: {date: "2016-01-25T00:00:00", close: 93.5569, buySell: "Buy"}
5: {date: "2016-04-08T00:00:00", close: 102.7861, buySell: "Sell"}
firstReturn: 1.0783205505422155
sell:
    close: 199.9002
    date: "2019-04-30T00:00:00"

这是试图将值打印到浏览器页面的html文件:

<div>
            <mat-list >
                <mat-list-item *ngFor="let item of stockdata ">
                  {{item.buysell.date | date}} {{item.buysell.close | currency}} {{item.buySell.buysell | json}} {{item.firstReturn | json}}
                </mat-list-item>
            </mat-list>
  </div>

我收到此错误:

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

这是相应的组件文件:

export class DemostockComponent {

 stock: String;
stockdata
public buySellData$: Observable<Cagr[]>

constructor(private api: DemoapiService){}

getStock() {
  this.buySellData$ = this.api.getStock();
  this.buySellData$.subscribe(
           // Use the `data` variable to produce output for the user
           data => {
             this.stockdata = data;
             console.log("data from backend this.stockdata, this.stockdata", this.stockdata);
           }
         )}

}

1 个答案:

答案 0 :(得分:0)

服务器似乎没有返回您期望的返回值。根据您的输出,您可能需要更改:

*ngFor="let item of stockdata"

收件人:

*ngFor="let item of stockdata.buySell"

然后,您只需在模板中使用{{item.date | date}} ...请注意,这与您发布的数据结构不符。它应该看起来像这样:

export class Cagr {
    buySell: Istock[];
    firstReturn: number;
    sell: Dateclose;
    buy : Dateclose; 
}

希望对您有帮助!