Angular5 Material 数据表过滤不起作用

我在组件中调用了一个 Material 数据表，其中数据是从服务中定义的 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

最佳答案

我想问题出在您的数据源上，除此之外似乎还不错。

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">

关于Angular5 Material 数据表过滤不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49532119/