Угловой 5 * нг для массива объектов - PullRequest
Новая
       7

Угловой 5 * нг для массива объектов

0 голосов
/ 20 ноября 2018

У меня есть такие данные:

Исходные данные: 

var input = [
    {ru: "R201", area: "211", unit: "211"},
    {ru: "R201", area: "212", unit: "NONE"},
    {ru: "R201", area: "HCC", unit: "NONE"}];

Данные результатов: 

var result = [
    {area: ["211", "212", "HCC"],
    ru: "R201",
    unit: ["211", "NONE"]}];

Я хочу зациклить эти данные в шаблон с помощью ngFor,после некоторых исследований я застрял в этой проблеме, не могу найти другой поддерживающий объект 'R201' типа 'string'.NgFor поддерживает только привязку к Iterables, таким как массивы.

Вот моя функция: 

  this.groupBy = _
  .chain(input)
  .groupBy('ru')
  .map(function(value, key) {
      return {
          ru: key,
          area: _.uniq(_.pluck(value, 'area')),
          unit: _.uniq(_.pluck(value, 'unit'))
      }
  })
  .value();

А вот мой шаблон: 

<ion-list no-lines class="menus">
  <ion-item ion-item *ngFor="let p of groupBy; let i=index" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+1)}">
    <ion-row>
      <ion-col col-9>
        <span ion-text>
          <strong>{{ p.ru }}</strong>
          <ion-icon [name]="isLevel1Shown('idx'+i) ? 'arrow-dropdown' : 'arrow-dropright'" float-right></ion-icon>
        </span>

        <ion-list no-lines *ngIf="isLevel1Shown('idx'+i)">
          <ion-item no-border *ngFor="let menu of p.ru; let i2=index" text-wrap (click)="toggleLevel2('idx'+i+'idx'+i2)" [ngClass]="{active: isLevel2Shown('idx'+i+'idx'+i2)}"><br>
            <span ion-text>
              <strong>&nbsp;{{ menu.area }}</strong>
              <ion-icon [name]="isLevel2Shown('idx'+i+'idx'+i2) ? 'arrow-dropdown' : 'arrow-dropright'" float-right></ion-icon>
            </span>

            <ion-list no-lines *ngIf="isLevel2Shown('idx'+i+'idx'+i2)">
              <ion-item no-border text-wrap><br>
                <span ion-text (click)="openEquipmentPage(p.dataRu,menu.area,menu.unit)">
                  &nbsp;{{ menu.unit }}
                </span>
              </ion-item>
            </ion-list>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-item>
</ion-list>

Может быть, кто-то может мне помочьЗаранее спасибо.

1 Ответ

0 голосов
/ 20 ноября 2018

Вы можете манипулировать своим результатом в соответствии с этим.

var grd = .chain(input)
 .groupBy('ru')
 .map(function(value, key) {
  return {
      ru: key,
       area: _.uniq(_.pluck(value, 'area')),
       unit: _.uniq(_.pluck(value, 'unit'))
     }
   }).value();

this.groupBy = [];

for(let key in grd){
   groupby.push({key: key, values:grd[key]});
}
...