Question

我尝试使用像这样的过滤器创建一个Angular Material表https://material.angular.io/components/table/examples我只能在表中显示我的JSON数据，但无法实现过滤和分页。

我使用val newDF = oldDF.withColumn("dt_key", mapUdf(hour($"startTime"), getWeekdayHourUDF($"startTime"), lit(groupingKey)))从我的API中获取数据。

这是我的代码

app.component.html

data.service.ts

app.component.ts

    <div class="example-container mat-elevation-z8">
        <div class="example-header">
                <mat-form-field>
                  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                </mat-form-field>
              </div>            
    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let mobster"> {{mobster.name}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="rank">
        <mat-header-cell *matHeaderCellDef> Rank </mat-header-cell>
        <mat-cell *matCellDef="let mobster"> {{mobster.rank}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="_id">
        <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
        <mat-cell *matCellDef="let mobster"> {{mobster._id}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator #paginator
    [pageSize]="10"
    [pageSizeOptions]="[5, 10, 20]"
    [showFirstLastButtons]="true">
    </mat-paginator>
  </div>

data.service.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';
import { Mobster } from './mobster.model';
import { MatPaginator, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  displayedColumns = ['name', 'rank', '_id'];
  dataSource: any = [];

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  showData() {
  this.dataService.getData()
    .subscribe((res) => {
      this.dataSource = res;
    });
  }

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.showData();
  }


}

如何使用过滤器实现Angular Material表？

0 个答案: