angular 7 材料表 - 過濾器工作不正常

Question

我創建了一個頁面，在其中顯示角度材料表數據。 在表格數據之上，我放置了一個過濾器輸入以過濾格式顯示數據。 一切正常，但我觀察到了一種奇怪且意外的角度行為。 對於某些字符，它會在每次擊鍵時顯示過濾的行，但對於其他一些字符，它不會在擊鍵時顯示行。

列表users.component.html

 <div class="example-container mat-elevation-z8">

  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" autocomplete="off">
  </mat-form-field>

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

    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.index}} </td>
    </ng-container>

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

    <ng-container matColumnDef="gender">
      <th mat-header-cell *matHeaderCellDef> Gender </th>
      <td mat-cell *matCellDef="let element"> {{element.gender}} </td>
    </ng-container>

    <ng-container matColumnDef="score">
      <th mat-header-cell *matHeaderCellDef> Score </th>
      <td mat-cell *matCellDef="let element"> {{element.score}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" 
    ></tr>
  </table>
</div>

列出users.component.ts

import { Component, OnInit } from '@angular/core';
import { ListService } from '../services/list.service';
import { User } from '../model/user.model';
import { MatTableDataSource } from '@angular/material';
import { FormControl } from '@angular/forms';


@Component({
  selector: 'listusers',
  templateUrl: './listusers.component.html',
  styleUrls: ['./listusers.component.css']
})
export class ListusersComponent implements OnInit {
  public users: User[] = [];
  displayedColumns = [ 'position','name', 'gender', 'score'];
  dataSource: MatTableDataSource<User>; 

  constructor(private listsrv:ListService) { }

  ngOnInit() {      
    this.loaddata();

    if(this.dataSource){
      this.dataSource.filterPredicate = (data: User, filtersJson: string) => {
        const matchFilter = [];
        const filters = JSON.parse(filtersJson);

        filters.forEach(filter => {
          const val = data[filter.id] == null ? '' : data[filter.id];
          matchFilter.push(val.toLowerCase().includes(filter.value.toLowerCase()));
        });
          return matchFilter.every(Boolean);
      };
    }
  }

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

  loaddata(){
    this.listsrv.getList()
    .subscribe(
      result => { 
        for(var key in result){ 
            this.users.push(result[key])
        } 
      },
      error => {console.log(' error',error)},
      () => {console.log(this.users)
        this.dataSource = new MatTableDataSource(this.users);        
      }
    ) 
  }
}

一些 CSS 也在那里，但不共享，因為它減少了 ques 的長度。 我使用的數據來自 http 服務調用

getList(){return this.http.get(this.url+'/list');}

這實際上是在服務器上調用路由函數並返回 json 對象。

list.route.js

const express = require('express');
const router = express.Router();

router.get('/', function(req, res) {
  var jsonobj = [ 
    {name:"john",gender:"male", score:345,},
    {name:"alice",gender:"female",score:678},
    {name:"paul",gender:"male",score:263},
    {name:"tia",gender:"female",score:620},
    {name:"michel",gender:"male",score:458},
    {name:"akbar",gender:"male",score:382},
    {name:"simon",gender:"male",score:193},
    {name:"albela",gender:"male",score:193}
  ]
    console.log('list route called')
    res.send(jsonobj) 
})
module.exports = router;

我嘗試在 stackblitz.com 和 plunker 中創建項目，但無法復制某些設置相關問題的問題。 我觀察到當我按下“t”、“j”、“u”等其他鍵時，它可以工作，但是當我按下“a”時，它不顯示“alice”和“albela”行。 我必須繼續輸入，當輸入 3 個字符時它會顯示行。

它也沒有在控制台上顯示任何錯誤，所以我不知道。 請看一看並建議我。

謝謝

Answer 1

我在這里找到了解決方案

this.dataSource.filterPredicate 配置不正確，而且位置錯誤。 我修改過的 listusers.component.ts 如下，

列出users.component.ts

import { Component, OnInit } from '@angular/core';
import { ListService } from '../services/list.service';
import { User } from '../model/user.model';
import { MatTableDataSource } from '@angular/material';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'listusers',
  templateUrl: './listusers.component.html',
  styleUrls: ['./listusers.component.css']
})
export class ListusersComponent implements OnInit {
  public users; 
  displayedColumns = [ 'position','name', 'gender', 'score'];
  dataSource: MatTableDataSource<User>;  

  constructor(private listsrv:ListService) { }

  ngOnInit() {      
    this.loaddata();
  }

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

  loaddata(){
    console.log('in function loaddata') 
    this.listsrv.getList() 
      .subscribe(result => 
                  this.users = result, 
                  error => console.log('Error :',error), 
                  () => { console.log(this.users); 
                          this.dataSource = new MatTableDataSource(this.users);
                          //added below line
                          this.dataSource.filterPredicate = 
                            (data: User, filter: string) => data.name.indexOf(filter) != -1;
                })
  }
}