Привязать динамические столбцы и данные к матовой таблице под углом 7 - PullRequest
Новая
       2

Привязать динамические столбцы и данные к матовой таблице под углом 7

0 голосов
/ 03 октября 2019

Я привязываю данные к таблице угловых материалов, динамически подготавливая столбцы. 

please find below code 

component.ts

export class DepComponent {
    tableSource :any= [
              {
                "name":"ssit",
                "departments":[{"depName":"cse","noOfStudents":30},
                                {"depName":"civil","noOfStudents":60}]
              },
                   {
                "name":"vbit",
                "departments":[{"depName":"cse","noOfStudents":90},
                                {"depName":"civil","noOfStudents":40}]
              }
        ];

    displayedColumns: string[] = [];
   constructor() {
        this.displayedColumns= this.tableSource[0].departments.map(x=>x.depName)
    }
}


  <table mat-table [dataSource]="tableSource" class="mat-elevation-z8">
        <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
            <th mat-header-cell *matHeaderCellDef>
                {{column}}
            </th>
            <td mat-cell *matCellDef="let element">
                <span *ngFor="let s of element.departments">
                    {{s.noOfStudents}}
                </span>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

получаю вывод, подобный этому, дубликаты данных печатаются в каждой строке, как показано ниже, с моим кодом 

cse     civil
30 60   30 60
90 40   90 40

Я хочу вывод, как показано ниже 

Cse Civil
30  60
90  40

1 Ответ

2 голосов
/ 03 октября 2019

Чтобы получить желаемый результат Сначала вам нужно преобразовать данные в желаемый формат, например 

dataSource=this.tableSource.map(i=> {
      var result = {};
         i.departments.forEach(d=>{
        result[d['depName']]=d.noOfStudents
        })
       return result;
      })

, затем изменить HTML на 

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
         <ng-container matColumnDef="cse">
                <th mat-header-cell *matHeaderCellDef> Cse </th>
                <td mat-cell *matCellDef="let element"> {{element.cse}} </td>
          </ng-container>
          <ng-container matColumnDef="civil">
                <th mat-header-cell *matHeaderCellDef> Civil </th>
                <td mat-cell *matCellDef="let element"> {{element.civil}} </td>
          </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

demo

...