Как отобразить отдельные строки из данных JSON в Ioni c 4 - PullRequest
Новая
       10

Как отобразить отдельные строки из данных JSON в Ioni c 4

0 голосов
/ 13 марта 2020

У меня есть два JSON данных, указанных ниже:

userMcData: 

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

userMcData JSON показывает идентификатор машины и имя машины.

items: 

[
   {
      "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 показывает идентификатор машины, сторону и некоторые другие столбцы. В этом JSON каждая машина должна иметь 2 ряда.

Оба JSON данные являются динамическими c.

Я хочу показать эти данные, как указано ниже:

Image1

Я хочу показать данные в виде карт для каждой машины из userMcData JSON. На каждой карте я должен показать конкретные машинные данные из пунктов JSON. Я пробовал с трубкой. А изображение выше взято из модифицированных предметов JSON.

код: 

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>

Ответы [ 2 ]

0 голосов
/ 14 марта 2020

Я использовал keyvalue трубу, предложенную angular. По умолчанию результат сортируется по ключу. Поэтому пришлось использовать функцию сравнения, чтобы сохранить исходный порядок.

Так что код 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;
  }

Вот результат -

Output image

0 голосов
/ 13 марта 2020

Вы можете попробовать это ниже logi c, структура может измениться в зависимости от того, как вы хотите отобразить: 

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