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

【问题标题】：Array of objects as dataSource in mat-table对象数组作为 mat-table 中的数据源
【发布时间】：2020-09-30 21:58:53
【问题描述】：

我在这个结构中有一组对象：

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>

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

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

【问题讨论】：

你一定需要那个数据结构吗？桌子也一样
@AlbertoValerio 是的。我还想在 dataSource 中发送整个数据。

标签： angular mat-table

【解决方案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

【讨论】：

【解决方案2】：

您可以将您的对象数组转换为更简单的数组，然后将这个简单的数组打印到表格中。

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

let newData = [];
for(let i = 0; i < data.length; i++){
  newData.push(...[{name: data[i].course}, ...data[i].students]);
}

console.log(newData);

【讨论】：