Question

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

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

我已经创建了一个用于从api提取数据的服务组件，但是我很难在datatable中实现此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

您应该能够在承载表的组件的构造函数中注入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>在单元格中显示数据（例如，如果要显示{{ 1}} JSON属性）：

row.bank_id

表格组件TypeScript文件中的bank_id将需要反映您在HTML中定义的列：

<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>

我已经创建了一个StackBlitz来证明上面的内容。 JSON响应中有3000多个项目，因此加载可能需要花费几秒钟的时间。

如何在角度材料数据表中包含json数据？

1 个答案: