Фильтрация столбцов PrimeNg - PullRequest
Новая
       11

Фильтрация столбцов PrimeNg

0 голосов
/ 10 апреля 2019

На самом деле, я хочу использовать фильтрацию столбцов для поля isActive.

Детали из API, 

[{
    "id": "1",
    "name": "Demo1",
    "isActive": false

  },
  {
    "id": "2",
    "name": "Demo2",
    "isActive": true
  },
  {
    "id": "3",
    "name": "Demo3",
    "isActive": false
  },
  {
    "id": "4",
    "name": "Demo4",
    "isActive": true
  }
]

Я хочу отобразить значения в таблице. В поле isActive необходимо отобразить active для true и неактивно для ложь.

И я использовал следующий код для этого 

  <td class="text-center">
      <span [class]="division.isActive? 'badge badge-success' : 'badge 
     badge-danger'">{{division.isActive == true ? "ACTIVE":INACTIVE" }} 
     </span>
   </td>

Ниже приведен пример таблицы 

id           value         isActive
------------------------------------
1            Demo1          INACTIVE
2            Demo2          ACTIVE
3            Demo3          INACTIVE
4            Demo4          ACTIVE

Поскольку я хочу использовать активный / неактивный в фильтре, чтобы получить значения. Но из-за значений API (true / false) я могу использовать только true / false.

Ниже приведен интерфейс, который я использовал. 

 export class Division {
  constructor(
   public id: string,
   public name: string,
   public isActive: string
  ) { }
 }

Можем ли мы написать условие Активное / Неактивное здесь? Это возможно, вы можете мне помочь?

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Вы можете использовать сторонний пакет npm для достижения своей цели

ng2-smart-table

https://github.com/akveo/ng2-smart-table

0 голосов
/ 11 апреля 2019

Трудно помочь вам с вашей конкретной проблемой, не видя логику в вашем компоненте.Вместо этого я дам вам представление о том, как вы решите эту проблему.

  • Добавьте внешний фильтр вне таблицы, например InputSwitch (показать Деактивировано)
  • Когда ползунок правда показать все.Когда слайдер показывает только ложь isActive === true
...