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

Question

我正在开发一个Angular 5项目，我有一个表格，里面有我正在显示的数据。该表是角度材料的MatTableModule。这是一个两部分问题。

我有一个服务，它向我的API发出GET请求并返回所有数据，我正在下面的component.ts文件中处理。所有这一切工作正常，但表格在较小的屏幕上没有响应，因此我需要能够循环返回的数据并在较小的屏幕上以另一种非表格格式显示。但是，我无法弄清楚如何。

<!-- language: lang-typescript -->
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会以某种方式自动订阅该服务，并且我能够访问其中的值。我只需要能够做同样的外部mat-table。

在此期间，我还想知道如何从Component类中访问RoutesDataSource类中的iterable属性。我怎么做？我无法弄清楚如何在此代码上添加语法高亮！

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

Answer 1

找到了解决这个问题的方法。我添加了类属性项，如此...

public items: Array<any> = []

那么在ngInInit（）方法中......

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

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