时间戳

首页 > 解决方案 > 如何在 Ionic Ecommerce App 中应用产品搜索

angular - 如何在 Ionic Ecommerce App 中应用产品搜索

问题描述

我正在开发 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);
    });
  }

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

在此处输入图像描述

标签： angularionic-frameworkionic3

解决方案

这是您需要的非常粗略的实现：

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

推荐阅读