如何在角度的数组类型变量中设置响应?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在角度的数组类型变量中设置响应?相关的知识,希望对你有一定的参考价值。

我想将响应数据存储在来自API响应的变量中,并在component.html文件中显示。

Component.ts文件:

public coinHistory = [];
this.service.getCoinsHistory().subscribe(
    (response) => {
        this.handleCoinsResponse(response);
    },
    (error) => {
        console.log(error);
    }
);
handleCoinsResponse(response: any) {
    console.log('what  ------', response);
    this.spinner.show();
    if (response.status === 1) {
        this.coinsHistory = response.responseData.data;
        console.log(' this.coinsHistory ------', typeof(this.coinsHistory));
    }
}

并且在component.html文件中:

<div *ngFor="let coinData of coinsHistory">
    <p>{{ coinData.coins_earned_for }}</p>
    <p>{{ coinData.referral_coins }}</p>
</div>

来自api的数据是这样的:


status: 1
msgCode: 224
msg: "Referrer coins history"
responseData:
    total_coins: 200
    data: Array(2)
        0:
            id: 85
            referrer_id: 4
            referee_id: null
            coins_earned_for: "Deducted for withdraw"
            referral_coins: "-100"
            created_at: "2020-02-01 12:18:21"
            updated_at: "2020-02-01 12:18:21"

        1:
            id: 85
            referrer_id: 4
            referee_id: null
            coins_earned_for: "Deducted for withdraw"
            referral_coins: "-100"
            created_at: "2020-02-01 12:18:21"
            updated_at: "2020-02-01 12:18:21"

但是我收到错误消息:

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

尝试用模型而不是任何模型来定义响应,例如:

export interface ICoinsHistory{
totalCoins: number;
data: ICoin[];
}
export interface ICoin{
//...Coin data
}

以上是关于如何在角度的数组类型变量中设置响应?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 - 如何使用角度输入装饰器在 html 输入中设置动态类型

如何获取有关谁更改了我在手表中设置的变量的信息(角度)

如何以角度在 FormArray 中设置值?

如何在 jsonobject 中设置数组值

如果响应正文中的 id 具有依赖性,如何使用预请求脚本在邮递员中设置 2 个集合变量?

如何在android的片段中设置应用程序上下文?