Angular 5 * ngFor對象數組

Question

我有這樣的數據：

初始數據：

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

也許有人可以幫助我，在此先感謝您。

Answer 1

您可以根據此操作結果。

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