Angular 5 Material-UI динамическая таблица матов по данным json - PullRequest
Новая
       17

Angular 5 Material-UI динамическая таблица матов по данным json

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

Я использую API, который может возвращать разные JSON, каждый из которых означает свою таблицу.

Это общий HTML-код в моем compenent.html 

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

Данные, которые я 'я получаю в своем классе компонентов 

getData(){
  this.requestService.getTableData().subscribe(
    data => {
      this.arrData = data as string []; 
       console.log(this.arrData['requestType']);
    },
    error => {
      console.log (error.message);
    }
  )
  this.cols = JSON.parse(this.arrData['responsePayload']);
}

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

[
  {
    "Company": "Alfreds Futterkiste",
    "Contact": "Maria Anders",
    "Country": "Germany"
  },
....
]

this.cols - мой источник данных для таблицы mat, и этозаполнение правильно в виде массива с 6 записями. Мне нужно сделать из этого таблицу соответствия, но я продолжаю получать эту ошибку

requestHandler.html: 6 ОШИБКА TypeError: name.replace не является функцией в имени MatColumnDef.set [как имя] (table.js: 175) на updateProp (core.js: 32188)

на 

       <ng-container *ngFor="let col of cols" [matColumnDef]="col">

Может ли кто-нибудь указать мне правильное направление / сказать мне, где я 'не так ли?

Кроме того, если что-то не понятно в вопросе, пожалуйста, дайте мне знать, я попробую объяснить еще раз.

Примечание: я считаю, что есть решение в создании интерфейсадля данных JSON, которые я получаю, но в итоге я сделаю слегка статичный HTML для каждого типа таблицы. Я хочу, чтобы это было общим. Что-то вроде динамического интерфейса (который, я думаю, сделать нельзя). Это , хотя и круто, но я должен уметь это делать во время выполнения.

1 Ответ

3 голосов
/ 06 ноября 2019

Импорт MatTableDataSource в ваш файл .ts 

import {MatTableDataSource} from "@angular/material";

определяет столбцы, как показано ниже 

cols: MatTableDataSource<Any>;

, и вы должны передать массив как MatTableDataSource

 this.cols = new MatTableDataSource(this.arrData['responsePayload']);

а также вы можете использовать рядный метод 

 <table mat-table [dataSource] = "cols" class="mat-elevation-z8">

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

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

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

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

Надеюсь, это поможет ..!

...