Блог

У меня есть массив с данными о встречах, подобными этому, из которого я хочу создавать таблицы:

 [
 { 
  day: '20/10/2020',
  subject: 'meeting',
  client: 'Rob'
  location: 'Office
 },
{ 
  day: '21/10/2020',
  subject: 'meeting',
  client: 'Lisa'
  location: 'Town'
 },
{ 
  day: '21/10/2020',
  subject: 'meeting',
  client: 'Kevin'
  location: 'Office
 },
 { 
  day: '22/10/2020',
  subject: 'meeting',
  client: 'Kevin'
  location: 'Home'
 }
]
  

мой HTML-файл:

  <div *ngFor="let appointment of appointments"   class="card-body">
   <table class="table table-striped">
     <thead>
  <tr>
  <th>  Day </th>
  <th>Where </th>
  <th> Client</th>
  <th>Subject</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td>  <small>{{appointment.day}}</small></td>
  <td> <small>{{appointment.location}} </small> </td>
  <td><small>{{appointment.client}}</small> </td>
    <td><small>{{appointment.subject}} </small></td>
  </tfoot>
</table>
</div>
  

Это создает таблицу для каждой встречи, но как я могу сделать так, чтобы встречи в один и тот же день отображались друг под другом, без промежуточного заголовка. Итак, вот так: (визуализация)

любая помощь приветствуется

Существует очень простой способ решить вашу проблему, давайте сделаем это. Мы будем использовать библиотеку Lodash, поэтому в первую очередь вам нужно будет импортировать.

Установка через NPM:

 npm i lodash
npm i --save-dev @types/lodash
  

И импортировать в наш проект:

 import * as _ from 'lodash';
  

Итак, происходит волшебство с нашим только что импортированным другом и его groupBy() методом:

 let result = _.groupBy(this.appointments, (appointment) => {
return appointments.day;
});
console.log(result);
  

Результат из консоли будет:

 {
  "20/10/2020": [
    {
      "day": "20/10/2020",
      "subject": "meeting",
      "client": "Rob",
      "location": "Office"
    }
  ],
  "21/10/2020": [
    {
      "day": "21/10/2020",
      "subject": "meeting",
      "client": "Lisa",
      "location": "Town"
    },
    {
      "day": "21/10/2020",
      "subject": "meeting",
      "client": "Kevin",
      "location": "Office"
    }
  ],
  "22/10/2020": [
    {
      "day": "22/10/2020",
      "subject": "meeting",
      "client": "Kevin",
      "location": "Home"
    }
  ]
}