Как отображать сгруппированные данные в машинописном тексте с помощью * ngFor

Question

Я пытаюсь отобразить данные в машинописном тексте как сгруппированные данные в следующем формате:

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 введите здесь описание ссылки

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>

Если у меня есть do console.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)

Answer 1

транспортных средств - это 2-мерный массив, поэтому вам нужно l oop дважды -

 <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}}