Using Searchbar to filter ion-cards in Ionic Angular

问题

I am trying to some data from an API. On typing the branch name in the search bar, I wish to load the ion-cards dynamically as the user starts typing in the search bar.

Here's what I have done so far:

HTML

<ion-header>
  <ion-toolbar>
    <ion-title style="position: centre;">
      Bank Search
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-list>
     
    
      <ion-item>
        
        <ion-select placeholder="Select Bank Location" [(ngModel)]="place" (ionChange)="Retrievedata();" >
          <ion-select-option value="BANGALORE">Bangalore</ion-select-option>
          <ion-select-option value="MUMBAI">Mumbai</ion-select-option>
          <ion-select-option value="CHENNAI">Chennai</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>
    <ion-toolbar>
    <ion-searchbar></ion-searchbar>
    <br>
    <br>
    <ion-card *ngFor="let bank of banks">
    
      <ion-grid>
        <ion-row >
          <ion-col>
              <span>Bank Name</span>          
          </ion-col>
          <ion-col>
            <div>
              <div class="ion-float-right">{{bank.bank_name}}</div>
            </div>
          </ion-col>
        </ion-row>
        <ion-row >
          <ion-col>
              <span>Branch</span>          
          </ion-col>
          <ion-col>
            <div>
              <div float-right>{{bank.branch}}</div>
            </div>
          </ion-col>
        </ion-row>
        <ion-row >
          <ion-col>
              <span>IFSC Code</span>          
          </ion-col>
          <ion-col>
            <div>
              <div float-right>{{bank.ifsc}}</div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card>
     </ion-toolbar>   
  </div>
</ion-content>

Typescript

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  ifsc:string;
  place: any;
 public banks:any;
  constructor(private http: HttpClient) {
    this.ifsc="";
 
  }
  Retrievedata() {
    // Load the data
    
let area=this.place;
if(area!=null)
    {this.prepareDataRequest(area)
      .subscribe(
        data => {
          // Set the data to display in the template
          this.banks = data;
          console.log(this.banks);
        }
      );
  }}
  private prepareDataRequest(areas:string): Observable<object> {
    // Define the data URL
    const dataUrl = 'API'+areas;
    // Prepare the request
    return this.http.get(dataUrl);
  }
}

I was able to retrieve the selected location from the HTML and pass it to the API to retrieve the data into "data" object. I have successfully displayed the cards dynamically on selecting the area. How to filter these cards based on the user input in the search bar?

来源：https://stackoverflow.com/questions/59095620/using-searchbar-to-filter-ion-cards-in-ionic-angular