如何在 Ionic Ecommerce App 中应用产品搜索答案

【问题标题】：How to apply search of products In Ionic Ecommerce App如何在 Ionic Ecommerce App 中应用产品搜索
【发布时间】：2019-01-28 22:05:11
【问题描述】：

我正在开发 Ionic 电子商务应用程序，我有许多产品要在该应用程序中显示，但我不熟悉 Ionic 应用程序中的产品搜索。所以我搜索了很多，并在 Ionic 中找到了搜索栏。

这是我的front.html：我已经添加了搜索栏。

<ion-searchbar [(ngModel)]="mysInput" (ionInput)="setSearchProducts($event)">
</ion-searchbar>

这是我在其中获取产品的 front.ts：

   searchproduct: any = [];
   mysInput: string;

    getsearchproducts()
  {
    this.restProvider.getproductsforsearch()
      .then(data => {
      this.searchproduct = data;
      console.log(this.searchproduct.msg);
      });
  }

  setSearchProducts()
  {
    this.searchproduct.filter(searproduct => {
      return searproduct.product_name.includes(this.mysInput);
    });
  }

控制台是一系列产品。所以，我想申请使用产品名称搜索这些产品。非常感谢任何帮助。

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

<ion-searchbar (input)="getItems($event)"></ion-searchbar>
<ion-list>
    <ion-item *ngFor="let item of searchProducts">
        {{ item.product_name }}
    </ion-item>
</ion-list>


public allProducts = [];
public searchProducts = [];


constructor() {
    this.getsearchproducts();
}

getsearchproducts(){
    this.restProvider.getproductsforsearch()
      .then((data) => {
        this.allProducts = data;
      });
  }

getItems(searchbar) {
    this.searchProducts = [];

    var query = searchbar.target.value;
    if (query.trim() == '') {
      return;
    }

    this.searchProducts = this.allProducts.filter((value)=> {
      if (value.product_name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
        return true;
      }
      return false;
    })
}

【讨论】：

我从 api 获取我的产品。在此：this.searchproduct = data;那么，您能否根据需要编辑答案。
将 api 响应数据分配给 this.searchproduct
好的。那么，您能否编辑答案，我会标记它。
它的可选参数不要使用
它最初显示所有产品名称。当我打开应用程序时。

【解决方案2】：

这是你需要的一个非常粗略的实现：

import { Component } from '@angular/core';

@Component({
  selector: 'app-key-up1',
  template: `
    <input (keyup)="onKey($event)">
    <div *ngFor="let product of searchproductFiltered">
      {{ product.product_name }}
    </div>
  `
})
export class KeyUpComponent_v1 {

  searchproduct = [
    { product_name: 'Dark honey 125m', product_price: 25 },
    { product_name: 'Eucalyptus honey 200m', product_price: 55 }
  ];

  searchproductFiltered = this.searchproduct;

  onKey(event: KeyboardEvent) {

    const filterValue = (<HTMLInputElement>event.target).value;

    if (!filterValue) {
      this.searchproductFiltered = this.searchproduct;
      return;
    }

    this.searchproductFiltered = this.searchproduct.filter(product => {
      return product.product_name.includes(filterValue);
    });

  }
}

Stackblitz：https://stackblitz.com/edit/angular-ytzuon?file=src%2Fapp%2Fkeyup.components.ts

【讨论】：