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

【问题标题】：How to display grouped data in typescript using *ngFor如何使用 *ngFor 在 typescript 中显示分组数据
【发布时间】：2020-08-04 01:44:59
【问题描述】：

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

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'
  },
];

我正在使用这个函数将它按“make”分组，它返回一个按“make”分组的新数组。我从 SOF enter link description here的以下链接中使用了这个功能

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;

}

在打字稿中我做了以下事情：

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

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

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

如果我有控制台.log(this.vehicles)，我会得到以下输出：

[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)

【问题讨论】：

标签： arrays angular typescript grouping

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：