如何在 Ionic 4 中显示来自 JSON 数据的特定行

Question

我有两个 JSON 数据如下：

userMcData:

[
   {
      "MACHINE_ID":4,
      "MCNAME":“RF21”
   },
   {
      "MACHINE_ID":5,
      "MCNAME":“RF22”
   },
   {
      "MACHINE_ID":6,
      "MCNAME":“RF23”
   }
]

userMcData JSON 显示机器 ID 和机器名称。

项目：

[
   {
      "Mcname":“RF21”,
      "Side":"L",
      "Breaks":101,
      “1”:20,
      “2”:10,
      “3”:15,
      “4”:11,
      “5”:9,
      “6”:10,
      “7”:6,
      “8”:8,
      “9”:12,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF21”,
      "Side":"R",
      "Breaks":94,
      “1”:18,
      “2”:11,
      “3”:11,
      “4”:3,
      “5”:11,
      “6”:18,
      “7”:10,
      “8”:5,
      “9”:7,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF22”,
      "Side":"L",
      "Breaks":151,
      “1”:12,
      “2”:13,
      “3”:13,
      “4”:25,
      “5”:15,
      “6”:12,
      “7”:29,
      “8”:17,
      “9”:15,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF22”,
      "Side":"R",
      "Breaks":316,
      “1”:51,
      “2”:27,
      “3”:23,
      “4”:26,
      “5”:28,
      “6”:57,
      “7”:39,
      “8”:41,
      “9”:24,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF23”,
      "Side":"L",
      "Breaks":164,
      “1”:15,
      “2”:22,
      “3”:19,
      “4”:14,
      “5”:13,
      “6”:20,
      “7”:15,
      “8”:22,
      “9”:24,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   },
   {
      "Mcname":“RF23”,
      "Side":"R",
      "Breaks":0,
      “1”:0,
      “2”:0,
      “3”:0,
      “4”:0,
      “5”:0,
      “6”:0,
      “7”:0,
      “8”:0,
      “9”:0,
      “10”:0,
      “11”:0,
      “12”:0,
      “13”:0,
      “14”:0
   }
]

items JSON 显示机器 ID、面和更多列。在这个 JSON 中，每台机器必须有 2 行。

两个 JSON 数据都是动态的。

我想按如下所示显示此数据：

我想将来自 userMcData JSON 的每台机器的数据显示为卡片。在每张卡片中，我必须显示来自 items JSON 的特定机器数据。我试过用管子。而上图取自修改后的itemsJSON。

代码：

keys.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    return Object.keys(value);
  }
}

HTML代码：

<ion-card *ngFor="let machine of userMcData">
    <ion-card-header>
      <div>
          <span class="alignleft">{{machine.MCNAME}}</span>
        </div>
   </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row *ngFor="let item of items">
          <ion-col *ngFor="let list of item | keys">
            {{item[list]}}
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
</ion-card>

Answer 1

您可以尝试以下逻辑，结构可能会根据您想要的显示方式而改变：

<ion-card *ngFor="let machine of userMcData">
    <ion-card-header>
      <div>
          <span class="alignleft">{{machine.MCNAME}}</span>
        </div>
   </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row *ngFor="let item of items">
          <ion-col *ngIf="item.Mcname == machine.MCNAME">
            <span *ngFor="let item_data in Object.keys(item)" *ngIf="item_data!='Mcname' && item_data!='Side' && item_data!='Breaks'">{{ item[item_data] }}></span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
</ion-card>

Answer 2

我使用了 angular 提供的 keyvalue 管道。默认情况下，它按键对结果进行排序。所以不得不使用比较函数来保留原来的顺序。

所以 HTML 代码看起来像 -

<ion-card *ngFor="let machine of userMcData">
  <ion-card-header>
    <div>
      <span class="alignleft">{{machine.MCNAME}}</span>
    </div>
  </ion-card-header>
  <ion-card-content>
    <ion-grid>
      <ion-row *ngFor="let item of items">
        <ng-container *ngIf="item.Mcname === machine.MCNAME">
          <ng-container *ngFor="let list of item | keyvalue: originalOrder">
            <ng-container *ngIf="!(list.key === 'Mcname' ||
                                  list.key === 'Side' ||
                                  list.key === 'Breaks')">
              <ion-col>
                {{list.value}}
              </ion-col>
            </ng-container>
          </ng-container>
        </ng-container>
      </ion-row>
    </ion-grid>
  </ion-card-content>
</ion-card>

并在TS文件中加入比较功能-

originalOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
    return 0;
  }

这是输出 -

如何在 Ionic 4 中显示来自 JSON 数据的特定行

How to display particular rows from JSON data in Ionic 4

json

pipe

ionic4