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

我使用这个站点中给出的代码创建了一个datatable。网址是：

在这段代码中，表中显示的数据是硬编码的，但我想显示一个从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;
   }
   }

 />

我的服务组件

您应该能够注入

BankHttpService

，并在承载表的组件的构造函数中调用

getBankBranchs（）

方法。在Observable的回调函数中，您可以创建一个新的

MatTableDataSource

（传递服务返回的数据），并将其分配给

this.dataSource

，以便将其用作表数据：

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

mat表的HTML

需要定义正确的列，您可以使用

行显示单元格中的数据。

（例如

行.bank\u id

，如果您想显示

bank\u id

JSON属性）：

---

我创建了一个演示上述内容的示例。加载可能需要几秒钟，因为JSON响应中有3000多个项目。

您的困难是什么，您有任何错误吗？没有，我没有任何错误。正如本文所述，“代码是硬编码的，用于在数据表中显示详细信息，但我想在数据表中显示通过api获得的详细信息。怎么做。在模板中，插值用于显示这些数据，但如何在数据表中显示这些数据？嗨，感谢Ian A的帮助，4小时代码我使用了来自“”的一个代码来实现它，现在该项目看起来与您在StackBlitz中为我做的一样。你能帮我解决这个项目中的另一个小编码问题吗？根据作业，我必须将一些银行标记为最喜欢的银行。查看标记为收藏夹的银行（如果网站刷新或重新加载，收藏夹应保持状态事件）。如何实施。你能帮我吗？应该使用数组吗？此外，为了从行中选择数据，还有angular material中提供的文档。这是如何在我的代码中实现它的链接，我创建这个链接是为了展示收藏夹是如何工作的。相关代码是新服务

收藏夹.service.ts

，

表格概览示例.html的第11-16行和
表格概览示例.ts的第21-35行
<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 = ['address', 'bank_id', 'name', 'city', 'district'];