Upon page loading and API call initiation, I am encountering an issue with the ngFor loop not displaying all the values. However, when I manually input a search query in the search box for filtering, the functionality works flawlessly. My goal is for all values to be shown without the search filter being applied initially during page load.
/*Custom Filter Pipe*/
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter',
})
export class FilterPipe implements PipeTransform {
transform(value: string, filterString: string, propName: string): any {
if (value === null && value.length < 1 || filterString === '') {
return value;
/*This value doesn't show when the filter isn't applied on load*/
}
const resultArray = [];
for (const item of value) {
filterString = filterString.toLowerCase();
if (item[propName].toLowerCase().indexOf(filterString) >= 0) {
resultArray.push(item);
}
}
return resultArray;
}
}
/*Component*/
ngOnInit() {
this.api.getStopData().subscribe(
data => {
this.stations = data;
}
);
}<div class="container">
<form class="form-inline md-form form-sm active-pink-2 mt-2">
<input class="form-control form-control-sm mr-3 w-75" name="search" [(ngModel)]="search" type="text"
placeholder="Search train stations" aria-label="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</form>
<!-- Card -->
<div *ngFor="let station of stations?.results?.objStation | filter:search:'StationDesc'">
<mdb-card class="m-1">
<!--Card content-->
<mdb-card-body>
<!--Title-->
<mdb-card-title>
<h4>{{station.StationDesc}} Train Station</h4>
<hr/>
</mdb-card-title>
<img class="col-6 panel-realtime" src="assets/img/icon_view.png" (click)="getStation(station.StationCode); basicModal.show()"
mdbWavesEffect>
<img class="col-6 panel-remove" src="assets/img/thumbnail_icon_map.png" (click)="getMaps(station.StationDesc); mapsModal.show()" mdbWavesEffect>
</mdb-card-body>
</mdb-card>
</div>
</div>