如何使用 ionic 2/3 显示动态数据，如股票数据答案

【问题标题】：how to display the dynamic data like stock data using ionic 2/3如何使用 ionic 2/3 显示动态数据，如股票数据
【发布时间】：2018-02-03 15:30:03
【问题描述】：

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

{
  "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>

到目前为止，我只显示名称如何显示数字以及向上或向下的图标

【问题讨论】：

既然颜色已经在json里了，是需要计算还是直接从数据中使用？

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

我认为您需要做的就是比较值，例如 *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>

【讨论】：

所以我必须在离子卡内容中使用临时变量，并且必须在离子卡上写 *ngFor="let cData of CList"
是的，这就足够了。
这个代码可以工作，你可以直接检查，只需用我的替换你的块
通常你所说的是真的在这里我必须显示 TestOne 和 TestTwo 两者同时增加和减少，这两个项目我必须不显示一项

【解决方案2】：

您可以使用[style.background] 并将您的属性Color 绑定到它：

<ion-card  *ngFor="let cData of CList" [style.background]="cData.Color">  
  <!-- -->
</ion-card>

DEMO

【讨论】：

【解决方案3】：

试试下面这个，让我知道你得到了什么

    <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>

.scss 文件

.positiveColor{
  color: white;
}
.negativeColor{
  color: white;
}

【讨论】：

我动态获取颜色代码，我必须将该代码仅应用于卡..我在离子卡中显示数据而不是按钮