如何将 HTML table 与数组 (Javascript) 中的相同值分组

Question

我有一个数组，其中包含这样的约会数据，我想从中创建 tables：

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

这会为每个约会生成一个 table，但是我怎样才能使同一天的约会显示在彼此的下方，而中间没有 ader。所以像这样：（可视化）

感谢任何帮助

Answer 1

有一个非常简单的方法可以解决您的问题，让我们来做吧。我们将使用 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"
    }
  ]
}

如何将 HTML table 与数组 (Javascript) 中的相同值分组

How do I group HTML table with the same value from array (Javascript)

html

arrays

angular

html-table

ngfor