如何在基于OpenApi的Angular(Ionic)中使用過濾器？

目前在我的 Ionic 應用程式中，我使用 ng2-search-filter 來過濾串列中的資料。但是，我的目標是在后端過濾并將過濾后的資料傳遞給前端。

我使用 OpenApi 3.0 作為后端和前端的介面。在這個界面中，我有兩種方法：

1. getAllCarports()（獲取所有車棚）。

2. getCarportLocationsByIdAndName(carportNameAndExternalId: string)（獲取過濾后的車棚）。

我的串列-client-service.service.ts

public getAllCarports() {
    return this.service.getAllCarports();
}
public getCarportLocationsByIdAndName(carportNameAndExternalId: string){
    return this.serviceFilter.getStructureCarportsByIdAndName(carportNameAndExternalId);
}

我當前的搜索欄：

<ion-searchbar
    [(ngModel)]="searchTerm"
    showCancelButton="focus"
    animated>
</ion-searchbar>

我目前的清單：

<ion-list id="list">
    <ion-item id="list-item" button *ngFor="let carport of carports | orderByCarportName | filter: searchTerm
              | paginate: {itemsPerPage: 8, currentPage: cp}"  class="listMargin" (click)="openCarport(carport.id)">
        <ion-label>{{carport.id}}</ion-label>
        <ion-label>{{carport.carportName}}</ion-label>
    </ion-item>
</ion-list>

加載頁面時，應照常回傳完整串列（getAllCarports()）。但是，如果您在搜索欄中輸入某些內容，則應該執行 getCarportLocationsByIdAndName(carportNameAndExternalId: string) 方法。最好在鍵入時一次又一次地更新串列。有沒有人有解決方案或方法？到目前為止，我還沒有在網上找到任何合適的東西。

更新 1

@Query("SELECT d FROM CarportLocationEntityView d WHERE d.externalId LIKE %:filterCriteria% OR lower(d.carportName) LIKE lower(concat('%', :filterCriteria,'%')) ")
List<CarportLocationEntityView> filterCarportList(@Param("filterCriteria") String filterCriteria);

更新 2

<ion-searchbar (ionChange)="onChange($event)"
                        [(ngModel)]="filterTerm"
                        showCancelButton="focus"
                        animated>
</ion-searchbar>

<ion-row>
   <ion-col size="12">
       <ion-list id="list">
         <ion-item id="list-item" button *ngFor="let carport of carports | orderByCarportName 
              | paginate: {itemsPerPage: 8, currentPage: cp}"   (click)="openCarport(carport.id)">
          <ion-label>{{carport.id}}</ion-label>
          <ion-label>{{carport.carportName}}</ion-label>
         </ion-item>
       </ion-list>
     </ion-col>
</ion-row>

onChange(event) {
    const filterTerm = event.target.filterTerm
    if (filterTerm === '') {
      this.listClientService.getAllCarportNamesWithId()
    } else {
      this.listClientService.getCarportLocationsByIdAndName(filterTerm)}

uj5u.com熱心網友回復：

首先，由于這兩種方法都加載了一個串列車棚，您應該將它們組合起來。只需添加引數，如果未設定（空）則全部加載，否則進行相應過濾。這可能如下所示

相反ngModel，要對 ion-searchbar 的輸入更改做出反應，您可以掛鉤 ionicsionChange并簡單地在那里發送請求。回應會覆寫*ngFor="let carport of carports您保存在 .ts 檔案中的車棚陣列（此處使用的陣列）。

該串列將在鍵入時更新，因為您在每次請求完成時都會覆寫該陣列。請注意，您應該去抖，否則您會不必要地向后端發送垃圾郵件。

Update1
如果您無法更新后端，只需對給定的搜索欄輸入值使用正確的 api 呼叫。

<ion-searchbar (ionChange)="onChange($event)" ... </ion-searchbar>

onChange(event) {
    // log "event", it should be an object which contains the value of the searchbar but i'm unsure of it's properties rn
    const value = event.target.value // not 100% sure if correct
    if (value === '') {
        getAllCarports()
    } else {
        getCarportLocationsByIdAndName(value)
    }
}

Update2
在您的 ts 檔案中創建一個 observable 并將您的車棚服務的結果分配給它。

carports: Observable<Carports[]>; // use the type that is returned by the service

... {
    ...
    this.carports = this.listClientService.getAllCarportNamesWithId()
}

使用關鍵字 async for carports 來表示這將異步加載并將更新。

*ngFor="let carport of carports | async ...

標籤：有角的 离子框架 筛选 开放式API

上一篇：GoogleMapsAPI查找詳情

下一篇：如何在按鈕單擊時提交離子單選按鈕值？