如何使用 *ngIf 在列表中显示 objects 的数组时创建断点？

Question

我有一个 objects 数组（本例中为汽车），我使用简单的排序函数对其进行了排序。我想在列表中为每种正在显示的新型汽车显示一个标题。我想我应该 *ngIf 不知何故，但似乎无法弄清楚如何。

预期输出：

亚洲汽车：

起亚
丰田

Cseh 汽车

斯柯达
... 等等

她是我目前所拥有的：

export class AppComponent {
  items = [
    {"car":"BMW", "type":"German Cars"},
    {"car":"Kia", "type":"Asian Cars"},
    {"car":"Mercedes", "type":"German Cars"},
    {"car":"Audi", "type":"German Cars"},
    {"car":"Seat", "type":"Spanish Cars"},
    {"car":"Skoda", "type":"Cseh Cars"},
    {"car":"Trabant", "type":"East-German Cars"},
    {"car":"Wardburg", "type":"East-German Cars"},
    {"car":"Toyota", "type":"Asian Cars"},
];

sortedItems = this.items.sort((a,b) => (a.type > b.type) ? 1: ((b.type > a.type) ? -1 :0));
}

一个在HTML

   <div>
  <ul>
    <li *ngFor = "let item of sortedItems">
      {{item.car}}
      {{item.type}}
    </li>
  </ul>
</div>

Answer 1

你可以这样做 (Stackblitz) -

AppComponent -

export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  items = [
    {"car":"BMW", "type":"German Cars"},
    {"car":"Kia", "type":"Asian Cars"},
    {"car":"Mercedes", "type":"German Cars"},
    {"car":"Audi", "type":"German Cars"},
    {"car":"Seat", "type":"Spanish Cars"},
    {"car":"Skoda", "type":"Cseh Cars"},
    {"car":"Trabant", "type":"East-German Cars"},
    {"car":"Wardburg", "type":"East-German Cars"},
    {"car":"Toyota", "type":"Asian Cars"},
  ];

  uniqueTypes : Array<string> = [];

  ngOnInit() {
    this.items.forEach( (curr) => {
      if (this.uniqueTypes.indexOf(curr.type) == -1) 
        this.uniqueTypes.push(curr.type);
      });
  }
}

创建数据管道 -

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

@Pipe({
    name: 'datapipe'
})
export class DataPipe implements PipeTransform {
  transform(data: Array<any>, type: string)
  {
    return data.filter( item => item.type == type );
  }
}

AppComponent html -

<div *ngFor="let type of uniqueTypes">
  <h3>{{ type }}</h3>
  <ul>
    <li *ngFor = "let item of items | datapipe:type">
      {{item.car}}
      {{item.type}}
    </li>
  </ul>
</div>

Answer 2

您应该多处理一下您的数据。地图是一个很好的类型。您将使用车辆的“类型”作为键，值将是该类型车辆的数组。

这里有一个堆栈闪电战的例子，可以帮助您入门：https://stackblitz.com/edit/angular-md2ltf?file=src%2Fapp%2Fapp.component.ts

更新组件示例

items = [
    {"car":"BMW", "type":"German Cars"},
    {"car":"Kia", "type":"Asian Cars"},
    {"car":"Mercedes", "type":"German Cars"},
    {"car":"Audi", "type":"German Cars"},
    {"car":"Seat", "type":"Spanish Cars"},
    {"car":"Skoda", "type":"Cseh Cars"},
    {"car":"Trabant", "type":"East-German Cars"},
    {"car":"Wardburg", "type":"East-German Cars"},
    {"car":"Toyota", "type":"Asian Cars"},
];

mappedItems = new Map<string, string[]>();

ngOnInit() {
  this.items.forEach(item => {
    let existingType = this.mappedItems.get(item.type) || [];
    this.mappedItems.set(item.type, [...existingType, item.car])
  })
}

更新模板（注意使用内置 Angular“键值”管道）

<ng-container *ngFor="let item of mappedItems | keyvalue;">
<p>{{ item.key }}</p>
<ul>
  <li *ngFor="let car of item.value;">
    {{ car }}
  </li>
</ul>
</ng-container>

如何使用 *ngIf 在列表中显示 objects 的数组时创建断点？

How to Use *ngIf to create break points in when display an array of objects in a list?

arrays

angular

angular-ng-if