Angular5 Material 数据表过滤不起作用

Question

我在我的组件中调用了一个 Material 数据表，其中数据是从 API 调用的，该 API 在服务中定义并在工作正常的组件中调用，但是当我应用带有过滤的数据表时material.io 提供的无论出于何种原因都无法按预期工作，我不知道过滤器部分不起作用？

有人可以帮忙吗？

没有错误或任何异常我尝试了各种改组代码并搜索此问题的方法仍然没有找到。

这是我的组件 TS 代码:

 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ViewAgentInformationDetailComponent } from '../view-agent-information-detail/view-agent-information-detail.component'
import { MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
import { protractor } from 'protractor/built/ptor';
import { Router, ActivatedRoute } from '@angular/router';
import { Element } from '../userinfo';
import { InfoService } from '../info.service';
import { MatPaginatorModule } from '@angular/material/paginator';

@Component({
  selector: 'app-view-agent-information',
  templateUrl: './view-agent-information.component.html',
  styleUrls: ['./view-agent-information.component.scss']
})
export class ViewAgentInformationComponent implements OnInit {

  dataSource;
  data: Element[];
  constructor(private router: Router, public Info: InfoService) { }

  displayedColumns = ['ViewOpt', 'CustID', 'PremiseID', 'Status', 'Market'];

  ngOnInit() {
    this.Info.getCustomers().subscribe(data => {
      this.dataSource = data
      console.log("Data Source: ");
      console.log(this.dataSource);
    })
  }

  applyFilter(filterValue: string) {
    this.data = this.dataSource;
    console.log(this.data);
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

  onSelect(element) {
    this.Info.changeData(element);
    this.router.navigate(['/dashboard/viewinfo', element.cust_id])
  }
}

Here you can see what is happening the screenshot

Answer 1

我想问题出在你的数据源上，除了这个似乎没问题。

ngOnInit() {
    this.Info.getCustomers().subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
        // rather than this.dataSource = data;
        console.log("Data Source: ");
        console.log(this.dataSource);
    })
}

在 HTML 中，您应该像这样使用数据源:

<mat-table [dataSource]="dataSource">