Я создал страницу, на которой отображаются angular данных таблицы материалов. Поверх таблицы данных я поместил фильтр ввода, чтобы показать данные в отфильтрованном формате. Все работает нормально, но я заметил странное и неожиданное поведение angular. Для некоторых символов он показывает отфильтрованные строки при каждом нажатии клавиши, но для некоторых других символов он не показывает строки при нажатии клавиши.
listusers.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>
listusers.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 также есть, но не делятся, так как уменьшают продолжительность квеста. Данные, которые я использую, поступают из вызова службы 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» и т. Д. c. тогда это работает, но когда я нажимаю «а», он не показывает строки «Алиса» и «Албела». я должен продолжать вводить, и он показывает строки, когда набираются 3 символа.
Это также не показывает никаких ошибок на консоли, поэтому я понятия не имею. Пожалуйста, посмотрите и предложите мне.
Спасибо