Как решить фильтр угловой трубы в целочисленном поле? - PullRequest
Новая
       11

Как решить фильтр угловой трубы в целочисленном поле?

0 голосов
/ 21 мая 2019

Я использую Angular6 Pipe. У меня есть список массива, который показан в таблице. Я хочу отфильтровать каждый столбец этой таблицы. Я способен отфильтровать первые три столбца таблицы, но последний столбец (Capacity) не работает. Это показывает ошибку. Я думал, что поле может быть целым числом, поэтому я получаю ошибки. Пожалуйста, покажите мне, как решить эту проблему.

здесь ссылка на стек

// ts file 

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>

1 Ответ

1 голос
/ 21 мая 2019

Я бы легко преобразовал 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;
  }

}
...