Looking to retrieve data from the API, specifically using PHP on the backend. While I can access the data successfully, I'm running into an issue with *ngFor and the search bar functionality. The search button only appears when the input in the search bar matches existing data in the database. This means that upon visiting the website, the search button is not visible until a valid input is entered.
Displayed below is the HTML code for the home page:
<ion-grid >
<ion-row >
<ion-col size-xs="12" size-sm="12" size-md="8" size-lg="8">
<ion-searchbar placeholder="Restaurant" [(ngModel)]="searchTermName" (ionChange)="searchName($event)"></ion-searchbar>
</ion-col>
</ion-row>
</ion-grid>
<div class="btn" *ngFor="let item of (results | async)">
<ion-button [routerLink]="['/', 'details', item.reid]" color="primary" fill="solid">
Search
</ion-button>
</div>
</div>
The TypeScript code for the home page is as follows:
searchName() {
this.results = this.userService.getName(this.searchTermName);
console.log(this.results);
}
Lastly, here is the user service file:
getName(name1) {
return this.http.get('http://127.0.0.1:8000/searchRestaurantByName', {headers: {name: name1}}).pipe(
map(name => {
console.log('RAW: ', name1);
return name;
})
);
}
'asd' represents a restaurant stored in the database. https://i.sstatic.net/KUJMj.png
Why does the search button not appear when no text is typed? https://i.sstatic.net/rf9SK.png