Angular5材料数据表过滤不起作用

Question

我在我的组件中调用了一个材料数据表，其中数据是从 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">

Answer 2

要添加到 Anshuman 的答案，您可能还需要覆盖 dataSource 的 filterPredicate。这允许您自定义过滤系统。假设您希望能够通过Premise ID 进行过滤：

ngOnInit() {
    this.Info.getCustomers().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
    });
    // Define filter function to look for 'premiseId'matches
    this.dataSource.filterPredicate = function(data, filter): boolean {
      return data.premiseId.toLowerCase().includes(filter);
    };
  }

Answer 3

试试这个：

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 {

 dayaSource : MatTableDataSource<Element>;
 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.dataSource.filter = filterValue.trim().toLowerCase();
 }

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