Как включить данные JSON в таблицу данных углового материала?

Question

Я использовал код, указанный на этом сайте, для создания таблицы данных. URL-адрес: https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.html

в этом коде данные, которые будут отображаться в таблице, жестко закодированы, но я хотел отобразить данные json, полученные из API.

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

Как использовать его внутри таблицы данных для отображения всех данных json.

    my service component 
  </
    bloghttpservice.ts


    import { Injectable } from '@angular/core';

    import { HttpClient, HttpHeaders, HttpClientModule } from 
    '@angular/common/http';

    import { HttpErrorResponse, HttpParams } from '@angular/common/http';

    import { Observable } from 'rxjs/Observable'
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/operator/do';

    @Injectable({
     providedIn: 'root'
     })

    export class BankhttpService {

    private baseUrl = "https://vast-shore-74260.herokuapp.com/banks";
    public myCity = "MUMBAI"

    constructor(private _http : HttpClient) {
    console.log('Bank http service called');
   }

   private handleError(err:HttpErrorResponse){
   console.log('Handle http error');
   console.log(err.message);
   return Observable.throw(err.message);
   }


   public getBankBranches(): any {
   let myResponse = this._http.get(this.baseUrl + '?city=' + this.myCity);
   console.log(myResponse);
   return myResponse;
   }
   }

 />

Answer 1

Вы должны иметь возможность внедрить BankHttpService и вызвать метод getBankBranches() в конструкторе вашего компонента, в котором размещена таблица. В функции обратного вызова Observable вы можете создать новый MatTableDataSource (передавая данные, возвращаемые службой) и присвоить его this.dataSource, чтобы он использовался в качестве данных таблицы:

constructor(private _bankHttpService: BankHttpService) {
    this._bankHttpService.getBankBranches().subscribe((branches) => {
        this.dataSource = new MatTableDataSource(branches);
    });
}

HTML-код для mat-table должен будет определять правильные столбцы, и вы можете отобразить данные в ячейке, используя row.<property_name> (например, row.bank_id, если вы хотите отобразить свойство bank_id JSON):

<mat-table [dataSource]="dataSource" matSort>
    <!-- Address Column -->
    <ng-container matColumnDef="address">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.address}} </mat-cell>
    </ng-container>

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

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

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

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

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

displayedColumns в файле TypeScript компонента таблицы должен отражать столбцы, определенные в HTML:

displayedColumns = ['address', 'bank_id', 'name', 'city', 'district'];

Я создал StackBlitz , демонстрирующий вышеизложенное. Загрузка может занять несколько секунд, поскольку в вашем ответе JSON содержится более 3000 элементов.