作为 mat-table 中数据源的对象数组

Question

我在此结构中有对象数组：

data = [ 
  {
    course: 'Angular',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React Native',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  }
]

我的目标是在每门课程的垫表中显示学生数据。预期的表是：

__________________________________

|Name | Enrolled Date | Email      |
------------------------------------
|ANGULAR                           |
---------
|Stu1 | 20-09-2020    | stu1@gmail |
-----------------------------------
|Stu2 | 17-09-2020    | stu2@gmail |
-----------------------------------
|Stu3 | 23-09-2020    | stu3@gmail |
-----------------------------------
|REACT                             |
--------
|Stu1 | 20-01-2020    | stu1@gmail |
-----------------------------------
|Stu2 | 17-01-2020    | stu2@gmail |
-----------------------------------
|Stu3 | 25-01-2020    | stu3@gmail |
-----------------------------------
|REACT NATIVE                      |
--------
|Stu1 | 20-05-2020    | stu1@gmail |
----------------------------------
|Stu2 | 22-05-2020    | stu2@gmail |
-----------------------------------
|Stu3 | 16-05-2020    | stu3@gmail |
-----------------------------------

我需要循环学生数据，它也是一个数组。因此，我通过循环 mat-table 将 data.students 发送到 mat-table dataSource。

<ng-container *ngFor="let eachObj of data">
  <table mat-table [dataSource]="eachObj.students">
    <ng-container matColumnDef="name">...</ng-container>
    <ng-container matColumnDef="date">...</ng-container>
    <ng-container matColumnDef="email">...</ng-container>
  </table>
</ng-container>

基本上，上面的代码将从数据数组中拾取第一个对象并渲染表格。然后拾取第二个对象并再打印一张表格并重复...

我知道这不是最好的方法。我可以在不操作数据的 dataStructure 的情况下获得更好的方法吗？

Answer 1

const STUDENT_DATA = [ 
  {
    course: 'Angular',
    students: [
      {name: 'A', enrolled_date: '', email: 'a@gmail.com'},
      {name: 'B', enrolled_date: '', email: 'b@gmail.com'},
      {name: 'C', enrolled_date: '', email: 'c@gmail.com'}
    ]
  },
  {
    course: 'React',
    students: [
      {name: 'D', enrolled_date: '', email: 'd@gmail.com'},
      {name: 'E', enrolled_date: '', email: 'e@gmail.com'},
      {name: 'F', enrolled_date: '', email: 'f@gmail.com'}
    ]
  },
  {
    course: 'React Native',
    students: [
      {name: 'G', enrolled_date: '', email: 'g@gmail.com'},
      {name: 'H', enrolled_date: '', email: 'h@gmail.com'},
      {name: 'I', enrolled_date: '', email: 'i@gmail.com'}
    ]
  }
]

dataSource = STUDENT_DATA.reduce((acc, {course, students}) => ([...acc, {course, isGroupBy: true}, ...students]),[])

console.log(dataSource);

您可以简单地展平数组并使用新键创建一个对象，groupBy这是正确的

现在将这个新的展平数组传递给dataSource mat-table 您可以将标题分组，如下所示

 <!-- Group header -->

 <ng-container matColumnDef="groupHeader">
    <td colspan="999" mat-cell *matCellDef="let groupBy"><strong>{{groupBy.course}}</strong></td>
  </ng-container>

为此的工作示例

https://stackblitz.com/edit/angular-mattable-with-groupheader-tagirk?file=app/table-basic-example.html