Question

我有产品api。在我的search.html页面上，我将显示从json文件中获取的所有产品的名称。如何基于search.html页面中的搜索栏实现名称。我使用了Ionic搜索栏组件，但它没有用。请帮我。如果此功能有任何其他选择，也请在此处发布。

search.ts

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html'
  // styleUrls: ['search.scss']
})
export class SearchPage {
  searchQuery: string = '';
  items: any[];
  constructor(public navCtrl: NavController, private apiService: ApiService) {
     this.initializeItems();
  }

  initializeItems() {
    this.apiService.productsCall().subscribe(response => {
      //console.log(response);
      if(response['status'] == 200) {
        // this.data=response['response'];
        this.items = response['response'];
        console.log(this.items);
      } else if(response['status'] == 500) {
        console.log(response['error'].sqlMessage);

      }
    });
  }  

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item['name'].toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

search.html

<ion-content padding>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

  <ion-list no-lines>

    <ion-item *ngFor="let item of items">
        <ion-label>{{item.name}}</ion-label>
        <ion-avatar item-right>
            <img src='../assets/imgs/medicalStore.png'>
        </ion-avatar>

        <ion-checkbox item-left></ion-checkbox>
    </ion-item>
</ion-list>

</ion-content>

json文件

{
"status":200,
"error":null,
"response":[
{
"product_id":1,"name":"knee cap","price":1290,"weight":0.4,"short_desc":"Neck Pain Relief Cervical Soft Pillo"
},
{
"product_id":2,"name":"soft pillow","price":1299,"weight":0.3,"short_desc":"Neck Pain Relief Cervical Soft Pillow "
}
]
}

Answer 1

所以这是一种可能的方法（不完整）......也许我已经过度设计了这个问题。

现在我们可以将查询以及数据存储为Observable而不是requerying或诸如此类的东西。虽然observable存储了原始值，但我们可以使用各种可调整的运算符，例如mergeMap和map函数。

map运算符允许我们修改observable发出的值，同时将原始值保留在observable本身中。 mergeMap允许我们有效地合并两个可观察对象。在这种情况下，_searchQuery以及_items。此外，我们可以通过在模板中使用async管道来避免订阅这些可观察对象。

如果可能，我建议不要使用订阅。虽然有用，但我注意到你从未取消订阅。这意味着订阅将保持活动状态，并且当您再次调用initializeItems函数时，您将实例化多个订阅。虽然从技术上讲，HTTP请求没有问题（因为它们会自行终止），但最好还是记住/记住。

让我知道是否还有其他事情！

<强> search.ts

import { Component } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';
import { NavController } from 'ionic-angular';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html'
})
export class SearchPage {
  private _searchQuery: BehaviorSubject<string> = new BehaviorSubject<string>('');
  private _items: Observable<any[]>;

  constructor(public navCtrl: NavController, private apiService: ApiService) {
    this._initializeItems();
  }

  get items(): Observable<any[]> {
    return this._searchQuery.pipe(mergeMap((query: string) => {
      return this._items.pipe(map((items: any[]) => {
        if (query && query.trim() != '') {
          return items.filter((item) => {
            return (item['name'].toLowerCase().indexOf(query.toLowerCase()) > -1);
          });
        } else {
          return [];
        }
      }))
    })).asObservable();
  }

  private _initializeItems() {
    this._items = this.apiService.productsCall()
      .pipe(map((response) => {
        if (response['status'] == 200) {
          return response['response'];
        } else if (response['status'] == 500) {
          console.log(response['error'].sqlMessage);
          return [];
        }
      }));
  }

  public updateQuery(ev: any) {
    // set val to the value of the searchbar
    const val: string = ev.target.value;
    this._searchQuery.next(val);
  }
}

<强> search.html

<ion-content padding>
  <ion-searchbar (ionInput)="updateQuery($event)"></ion-searchbar>

  <ion-list no-lines>

    <ion-item *ngFor="let item of items | async">
        <ion-label>{{item.name}}</ion-label>
        <ion-avatar item-right>
            <img src='../assets/imgs/medicalStore.png'>
        </ion-avatar>

        <ion-checkbox item-left></ion-checkbox>
    </ion-item>
</ion-list>

</ion-content>

如何根据Ionic3和Angular5

1 个答案: