Я пытаюсь отфильтровать несколько карт в 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>
Предложите, если есть более простой способ фильтрации карточек по выбранному значению.