如何使用离子2/3显示库存数据等动态数据

Question

嗨我以下面的格式获取动态数据

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

直到现在我只显示名称如何显示数字以及向上或向下图标

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

Answer 2

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

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

Answer 3

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

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

DEMO