javascript - Angular 7 Gruppindelning av data med hjälp av *ngfor

Just nu har jag data som kommer in på det här sättet i min Angular-applikation

https://stackblitz.com/edit/angular-ymmt4d

Hur kan jag gruppera och ordna data efter delstat och län och visa som tabellen nedan

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data = [
    { state: 'MN', county: '1', item: 0.297 },
    { state: 'MN', county: '1', item: 0.04 },
      { state: 'CA', county: '2', item: 0.019 },
    { state: 'MN', county: '1', item: 0.0374 }, 
    { state: 'CA', county: '2', item: 0.037 }
]
}
 <table >
        <tr>
          <th>State</th>
          <th>County</th>
          <th>Item</th>
        </tr>
        <ng-container *ngFor="let dataitem of data">
        <tr>
          <td>{{dataitem.state}}</td>
          <td>{{dataitem.county}}</td>
          <td>{{dataitem.item}}</td>
        </tr>
        </ng-container>
    </table>

Svar #1

om du har datan sorterad kan du använda låt i=index och kolla om datan innan är lika med hjälp av en villkorsoperator

<ng-container *ngFor="let dataitem of data;let i=index">
<tr>
  <td>{{i>0 && data[i-1].state==dataitem.state?'':dataitem.state}}</td>
  <td>{{i>0 && data[i-1].county==dataitem.county?'':dataitem.county}}</td>
  <td>{{dataitem.item}}</td>
</tr>
</ng-container>

Svar #2

omvandla dina data till flera arrayer med hjälp av lodash.

https://lodash.com/docs/4.17.11#groupBy

import { groupBy } from 'lodash-es'
const states = groupBy(data, 'state')

i din tabell kan du ha flera tbody

<tbody *ngFor="let state of states">...</tbody>

Relaterade artiklar