angular - 如何在 Angular Material 数据表中包含json数据？

Question

我使用本网站中提供的代码创建了一个数据表。网址是:https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.html

在此代码中，表中显示的数据是硬编码的，但我想显示从 api 获取的 json 数据。

我已经创建了一个用于从 api 获取数据的服务组件，但是我感觉很难在数据表中实现这个 json 数据。

如何在数据表内部使用它来展示所有的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

您应该能够注入(inject) BankHttpService并调用电话 getBankBranches()托管表的组件的构造函数中的方法。在 Observable 的回调函数中，可以新建一个 MatTableDataSource (传入服务返回的数据)赋值给this.dataSource以便将其用作表数据:

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

mat-table 的 HTML将需要定义正确的列，您可以使用 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 文件中需要反射(reflect)您在 HTML 中定义的列:

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

我创建了一个 StackBlitz证明以上内容。由于您的 JSON 响应中有 3000 多个项目，加载可能需要几秒钟。