Angular 如何使用ionic 2/3显示股票等动态数据

嗨，我正在获取以下格式的动态数据

{
  "Persons": [
    {
      "CName": "TestOne",
      "CId": 32,
      "UId": 36,
      "Email": "Test@test.com",
      "DeviceId": "822278EC",
      "Color":"#008000"
      "Value":65.65
    },
    {
      "CName": "TestTwo",
      "CId": 33,
      "UId": 37,
      "Email": "Friends@test.com",
      "DeviceId": "822278EC",
      "Color":"#FF0000",
      "Value":-15.65

    }
  ],
  "Name": null,
  "Id": 0,
  "User": 0

}

这里我想做的是，我想以下面的格式在卡片中显示动态数据

{
  "Persons": [
    {
      "CName": "TestOne",
      "CId": 32,
      "UId": 36,
      "Email": "Test@test.com",
      "DeviceId": "822278EC",
      "Color":"#008000"
      "Value":65.65
    },
    {
      "CName": "TestTwo",
      "CId": 33,
      "UId": 37,
      "Email": "Friends@test.com",
      "DeviceId": "822278EC",
      "Color":"#FF0000",
      "Value":-15.65

    }
  ],
  "Name": null,
  "Id": 0,
  "User": 0

}

在这里，我可以以卡片的形式显示动态数据，但如何根据正值和负值向卡片显示颜色。假设我得到35.36，它必须显示绿色和向上箭头，如果我得到-36.36，它必须显示红色和向下箭头

下面是我的模板代码

<ion-content>
  <ion-card  *ngFor="let cData of CList" (click)="Get(cData)">  
    <ion-card-content>
      <ion-card-title>
        <ion-icon name="contact"></ion-icon>  {{cData.CName}}     
      </ion-card-title>
    </ion-card-content>
  </ion-card>
</ion-content>

{{cData.CName}

---

到目前为止，我只显示姓名，如何显示数字以及向上或向下的图标，我想你所需要做的就是比较数值，比如

*ngIf='cData.value>=0'

和

*ngIf='cData.value<0'

<ion-content>

    <ion-card  *ngFor="let cData of CList" (click)="Get(cData)">  

        // This block will be shown if value is positive (design it as per requirement)
        <ion-card-content *ngIf='cData.value >= 0'>
            <ion-card-title>
                <ion-icon name="contact"></ion-icon>  {{cData.CName}}     
            </ion-card-title>
        </ion-card-content>

        // This block will be shown if value is negative (design it as per requirement)
        <ion-card-content *ngIf='cData.value < 0'>
            <ion-card-title>
                <ion-icon name="contact"></ion-icon>  {{cData.CName}}     
            </ion-card-title>
        </ion-card-content>
    </ion-card>

</ion-content>

//如果值为正值，则显示该块（根据要求进行设计）
{{cData.CName}
//如果值为负值，则显示该块（根据要求进行设计）
{{cData.CName}

试试下面的内容，让我知道你得到了什么

    <ion-content>
      <div *ngFor="let cData of CList" (click)="Get(cData)">
      <ion-card [ngClass]="(cData.value > 0) ? 'positiveColor':'negativeColor'"  [style.background-color]="cData.Color">  


          {{cData.name}} &nbsp;&nbsp; {{cData.CName}}     
         <ion-icon name="contact" item-end></ion-icon>

      </ion-card>
      </div>
    </ion-content>

---

您可以使用

[style.background]

并将属性

颜色

绑定到它：

---

既然颜色已经存在于json中，那么它是否需要根据数据进行计算或简单地使用？因此我必须在ion卡内容中使用temp变量，并且必须在ion卡上写入*ngFor=“let cData of CList”是的，这就足够了。此代码可以工作，您可以直接检查，只需将你的区块替换为我的区块通常你所说的是正确的我必须显示TestOne和TestTwo同时增加和减少这两个项目我必须不显示一个项目我动态获取颜色代码，我必须将该代码仅应用于卡。。我正在离子卡上显示数据，而不是按钮