Question

我正在尝试从API获取一些数据。在搜索栏中输入分支名称时，我希望在用户开始在搜索栏中输入内容时动态加载离子卡。

这是我到目前为止所做的：

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>

打字稿

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);
  }
}

我能够从HTML中检索选定的位置，并将其传递给API，以将数据检索到“数据”对象中。在选择区域后，我已经成功地动态显示了卡片。如何根据搜索栏中的用户输入来过滤这些卡片？

使用搜索栏过滤离子角中的离子卡

0 个答案: