Angular Material MatTableModule - 如何从模板中的 mat-table 外部访问 component.ts 文件中返回的数据？

Question

我正在处理一个 Angular 5 项目，我有一个包含我正在显示的数据的表格。 该表是来自角材料的 MatTableModule。 这是一个两部分的问题。

我有一个服务，它向我的 API 发出 GET 请求并返回所有数据，我在下面的 component.ts 文件中处理这些数据。 所有这些都可以正常工作，但表格在较小的屏幕上没有响应，因此我需要能够遍历返回的数据并在较小的屏幕上以另一种非表格格式显示它。 但是，我不知道该怎么做。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { RoutesService } from '../../services/routes/routes.service';
import { Routes } from '../../services/models/routes.model';

@Component({...})
export class RoutesComponent implements OnInit {

  public displayedColumns = ['from', 'to', 'departures', 'duration', 'price'];
  public dataSource = new RoutesDataSource(this.routesService);

  constructor(private routesService: RoutesService) { }

  ngOnInit() { }
}

export class RoutesDataSource extends DataSource<any> {
  public iterable: string[] = ["foo", "bar"];
  
  constructor(private routes: RoutesService) {
    super();
  }

  connect(): Observable<Routes[]> {
    return this.routes.getRoutes();
  }

  disconnect() {}
}

我的模板文件

<mat-table [dataSource]="dataSource">
  <!-- From Column -->
  <ng-container matColumnDef="from">
    <mat-header-cell *matHeaderCellDef> From </mat-header-cell>
    <mat-cell *matCellDef="let route"> {{route.from}} </mat-cell>
  </ng-container>

  <!-- To Column -->
  <ng-container matColumnDef="to">
    <mat-header-cell *matHeaderCellDef> To </mat-header-cell>
    <mat-cell *matCellDef="let route"> {{route.to}} </mat-cell>
  </ng-container>

  <!-- Departures Column -->
  <ng-container matColumnDef="departures">
    <mat-header-cell *matHeaderCellDef> Departures </mat-header-cell>
    <mat-cell *matCellDef="let route">{{route.departures}}</mat-cell>
  </ng-container>

  <!-- Duration Column -->
  <ng-container matColumnDef="duration">
    <mat-header-cell *matHeaderCellDef> Duration </mat-header-cell>
    <mat-cell *matCellDef="let route"> {{route.duration}} </mat-cell>
  </ng-container>

  <!-- Price Column -->
  <ng-container  matColumnDef="price">
    <mat-header-cell *matHeaderCellDef> Avg_price </mat-header-cell>
    <mat-cell *matCellDef="let route">
        <button mat-raised-button color="primary">{{route.avg_price}}</button>
    </mat-cell>
  </ng-container>

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

我想要做的是能够循环从外部 mat-table 返回的数据。 显然将 dataSource 绑定到 mat-table 以某种方式自动订阅服务，我能够访问那里的值。 我只需要能够在外面的垫子桌子上做同样的事情。

同时，我还想知道如何从 Component 类内部访问 RoutesDataSource 类中的可迭代属性。 我该怎么做？ 而且我不知道如何在这段代码上添加语法高亮！

任何帮助将不胜感激。 谢谢。

Answer 1

找到了解决此问题的方法。 我添加了一个类属性项目，就像这样......

public items: Array<any> = []

然后在 ngOnInit() 方法中...

  ngOnInit() {
    this.routesService.getRoutes().subscribe((data) => {
      if (data) {
        this.items = data;
      }
    });
  }

因此，我能够访问和循环模板中的“项目”并获得我想要的结果。 唯一的问题是您最终会在一个组件中两次订阅相同的服务，但除此之外，它工作得很好。