Question

我在这个结构中有一个对象的编队数组

formations= [ 
  {
    id: 100
    course: 'Angular',
    dateCreation:01/08/2020,
    students: [
      {id: 236, name: 'Ahmed', enrolled_date: '', email: ''},
      {id: 265, name: 'Sara', enrolled_date: '', email: ''},
      {id: 270, name: 'Caroll', enrolled_date: '', email: ''}
    ]
  },
  {
    id: 101,
    course: 'React',
    dateCreation: 06/03/2016,
    students: [
      {id: 370, name: 'Jean', enrolled_date: '', email: ''},
      {id: 371, name: 'Arnold', enrolled_date: '', email: ''},
      {id: 372, name: 'Matthieu', enrolled_date: '', email: ''}
    ]
  },
  {
    id: 102,
    course: 'React Native',
    dateCreation: 09/09/2019,
    students: [
      {id: 450, name: 'Samia', enrolled_date: '', email: ''},
      {id: 265, name: 'Sara', enrolled_date: '', email: ''},
      {id: 460, name: 'Georges', enrolled_date: '', email: ''}
    ]
  }
]

我的目标是在像这样的垫表中显示这个编队数组：

<头>

课程	日期创建	姓名
角度	01/08/2020	艾哈迈德
角度	01/08/2020	莎拉
角度	01/08/2020	卡罗尔
反应	06/03/2016	让
反应	06/03/2016	阿诺德
反应	06/03/2016	马修
反应原生	09/09/2019	萨米亚
反应原生	09/09/2019	莎拉
反应原生	09/09/2019	乔治

在我的 component.ts 中有：

dataSource = new MatTableDataSource<Formation>();

ngOnInit(): void {
    this._formationService.getFormations().subscribe(formations => {
      this.dataSource.data = formations;      
    });

哪里：

Formation {
    id: number,
    titre: string,
    dateDebut: Moment,
    dateFin: Moment,
    lieu: string,
    description: string,     
    list_participants: Participant[],
    dateCreation: Moment
}

并在模板中：

    <mat-table [dataSource]="dataSource">    

        <!-- titre Column -->
        <ng-container matColumnDef="titre">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Course </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.titre}} </mat-cell>
        </ng-container>


        <!-- Date Creation Column -->
        <ng-container matColumnDef="dateCreation">
            <mat-header-cell *matHeaderCellDef mat-sort-header> dateCreation </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.dateCreation | amDateFormat:'LL'}} </mat-cell>
        </ng-container>


                  
        <!--   Name student Column -->
        <ng-container matColumnDef="nameStudent">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
            <mat-cell *matCellDef="let row"> 
            <span *ngFor="let item of row.list_participants">{{item.name}}</span>
            </mat-cell>
        </ng-container>
        
        <!--   Enrolled Date student Column -->
        <ng-container matColumnDef="enrolled_dateStudent">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Enrolled Date </mat-header-cell>
            <mat-cell *matCellDef="let row"> 
            <span *ngFor="let item of row.list_participants">{{item.enrolled_date| amDateFormat:'LL'}}</span>
            </mat-cell>
        </ng-container>
        
        <!--   Email student Column -->
        <ng-container matColumnDef="emailStudent">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
            <mat-cell *matCellDef="let row"> 
            <span *ngFor="let item of row.list_participants">{{item.email}}</span>
            </mat-cell>
        </ng-container>
        
        

        <mat-header-row *matHeaderRowDef="displayedColumns ; sticky:true"></mat-header-row>
        <mat-row class="formation-row" *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>

感谢您的任何帮助或建议

Answer 1

解决办法是：

list: any[] = [];

ngOnInit(): void {
    this._formationService.getFormations().subscribe(formations => {
      
      formations.forEach (formation => {

        formation.students.forEach(student=> {
          this.list.push({
            id: formation.id,
            course: formation.course,
            dateCreation: formation.dateCreation,
            _id: student.id,
            name: student.name,
            enrolled_date: student.enrolled_date,            
            email: student.email
          });     
    });

在模板中输入：

    <mat-table [dataSource]="list">

映射对象数组还包含一个对象数组作为 mat-table 角度材料中的多行

1 个答案: