Angular 管道无法过滤每一列

Question

我正在使用 Angular6 管道。我有一个数组列表，显示在 table 中。我想过滤 table 的每一列。我能够过滤 table 的前三列，但最后一列（容量）不起作用。它显示错误。我认为可能是该字段是整数，这就是我出错的原因。请指导我如何解决这个问题。

stackblitz link here

//ts文件

campusFilter = '';
roomFilter = '';
roomTypeFilter = '';
capacityFilter = '';

roomInfoList: any = [
{
 id: 101,
 campus: 'Ashulia',
 room: '201AB',
 roomType: 'Theory',
 capacity: 30
},
{
id: 102,
campus: 'Dhaka',
room: '300',
roomType: 'Lab',
capacity: 35
},
{
id: 103,
campus: 'Khulna',
room: '300B',
roomType: 'Theory',
capacity: 50
},
{
id: 104,
campus: 'Khulna',
room: '102',
roomType: 'Lab',
capacity: 50
},
{
id: 105,
campus: 'Ashulia',
room: '201AB',
roomType: 'Lab',
capacity: 120
}
]

//管道过滤器文件

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'routineFilter'
})
export class ArrfilterPipe implements PipeTransform {

  transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || filterString === '') {
    return value;
  }
  const resultArray = [];
  for (const item of value) {
    if (item[propName] === null) {

   } else if 
   (item[propName].toLowerCase().indexOf(filterString.toLowerCase()) !== -1) 
   {
    resultArray.push(item);
   }
  }
  return resultArray;
 }}

//html 文件

<table border="1">
  <tr>
   <td>
    <input type="search" placeholder="Campus" name="campusFilter" 
    [(ngModel)]="campusFilter">
  </td>
  <td>
      <input type="search" placeholder="Room" name="roomFilter" 
    [(ngModel)]="roomFilter">
  </td>
  <td>
    <input type="search" placeholder="Room Type" name="roomTypeFilter" 
    [(ngModel)]="roomTypeFilter">
  </td>
  <td>
    <input type="search" placeholder="Capacity" name="capacityFilter" 
    [(ngModel)]="capacityFilter">
  </td>
 </tr>
 <tr>
  <th>Campus</th><th>Room</th><th>Room Type</th><th>Room Capacity</th>
 </tr>
 <tbody>
   <tr *ngFor="let roomInfo of roomInfoList | routineFilter: campusFilter: 
     'campus' | routineFilter: roomFilter: 'room'
     | routineFilter: roomTypeFilter: 'roomType' | routineFilter: 
     capacityFilter: 'capacity' ">
    <td>{{roomInfo.campus}}</td>
    <td>{{roomInfo.room}}</td>
    <td>{{roomInfo.roomType}}</td>
    <td>{{roomInfo.capacity}}</td>
   </tr>
 </tbody>
</table>

Answer 1

我很容易将 int 转换为字符串：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'routineFilter'
})
export class ArrfilterPipe implements PipeTransform {

  transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || filterString === '') {
      return value;
    }
    const resultArray = [];
    for (const item of value) {
      if (item[propName] === null) {
      } else if (item[propName].toString().toLowerCase().indexOf(filterString.toLowerCase()) !== -1) {
        resultArray.push(item);
      }
    }
    return resultArray;
  }

}

Angular 管道无法过滤每一列

Angular Pipe can not filter every column

angular-pipe

angular