如何使用 *ngFor 在 typescript 中显示分组数据

Question

我正在尝试将 typescript 中的数据显示为以下格式的分组数据：

Make: Audi
  Model  -  Year
   R8    -   2012
   RS5   -   2013
Make: Ford
  Model   -  Year
  Mustang -   2013   

我的数据（json）格式如下：

this.cars = [
  {
      'make': 'audi',
      'model': 'r8',
      'year': '2012'
  }, {
      'make': 'audi',
      'model': 'rs5',
      'year': '2013'
  }, {
      'make': 'ford',
      'model': 'mustang',
      'year': '2012'
  }, {
      'make': 'ford',
      'model': 'fusion',
      'year': '2015'
  }, {
      'make': 'kia',
      'model': 'optima',
      'year': '2012'
  },
];

我正在使用这个 function 将其按“make”分组，并返回一个按“make”分组的新数组。 我从 SOF 的以下链接中使用了这个 function 在此处输入链接描述

groupBy(list: any, key: any) {

  const newGroup = [];
  list.forEach(item => {
      const newItem = Object.assign({}, item);
      delete newItem[key];
      newGroup[item[key]] = newGroup[item[key]] || [];
      newGroup[item[key]].push(newItem);
  });
  return newGroup;

}

在 typescript 我做了以下：

this.vehicles = this.groupBy(this.cars, 'make');

在视图中我有以下语法，但屏幕上没有显示任何内容

 <div class="row alert-success" *ngFor="let vehicle of vehicles">
       {{vehicle}}
 </div>

如果我有 console.log(this.vehicles) 我得到以下 output：

[audi: Array(2), ford: Array(2), kia: Array(1)]
audi: Array(2)
0: {model: "r8", year: "2012"}
1: {model: "rs5", year: "2013"}
length: 2
__proto__: Array(0)
ford: Array(2)
0: {model: "mustang", year: "2012"}
1: {model: "fusion", year: "2015"}
length: 2
__proto__: Array(0)
kia: Array(1)
0: {model: "optima", year: "2012"}
length: 1
__proto__: Array(0)
length: 0
__proto__: Array(0)

Answer 1

车辆是一个二维数组，所以你必须循环两次 -

 <div class="row alert-success" *ngFor="let vehicles of vehiclesArray">
      <div *ngFor= "let vehicle of vehicles">
        {{vehicle.model}} {{vehicle.year}}
      </div>
 </div>

Answer 2

将您的{{vehicle}}更新为此

{{vehicle.model}} {{vehicle.year}}