Как отобразить все карты, если не введен фильтр для angular? - PullRequest
0 голосов
/ 19 января 2020

Я пытаюсь отфильтровать несколько карт в angular, используя Pipe, фильтр работает хорошо, но когда не указано входное значение, он не отображает никаких карт. Я хочу отобразить все карточки, когда не вводится или когда набрано или выбрано все.

filter.pipe.ts

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

@Pipe({
  name: 'filterBy'
})


@Injectable()
export class FilterByPipe implements PipeTransform {
  transform( array: Array<any>, filterField: string, filterValue: string ): Array<any> {
      if (!array) return [];
      return array.filter(item => item[filterField] == filterValue);
  }
}

user.component. html

<hr class="line">
<input #myInput type="text" placeholder="Filter" >
<div style="text-align: center;">
  <h3>MOVIES</h3>
</div>
<hr class="line">


 <div class="container" >
  <div class="row">
    <div class="col-md-3 mx-auto my-5" *ngFor="let card of cards | filterBy: 'title': myInput.value ">
      <mdb-card>
        <mdb-card-img [src]="card.img" alt="Card image cap">
        </mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>{{card.title}}</h4>
          </mdb-card-title>

          <mdb-card-text>
            {{card.description}}
          </mdb-card-text>

          <button mdbBtn color="primary">{{card.buttonText}}</button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

Предложите, если есть более простой способ фильтрации карточек по выбранному значению.

1 Ответ

0 голосов
/ 19 января 2020

Измените фильтр, чтобы он возвращал весь список, если фильтр не был установлен, например:

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

@Pipe({
  name: 'filterBy'
})


@Injectable()
export class FilterByPipe implements PipeTransform {
  transform( array: Array<any>, filterField: string, filterValue: string ): Array<any> {
      if (!filterField || !filterValue) {
         return array;
      }
      if (!array) return [];
      return array.filter(item => item[filterField] == filterValue);
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...