Как применить поиск продуктов в приложении Ionic Ecommerce

Question

Я работаю над приложением электронной коммерции Ionic, и у меня есть ряд продуктов, которые можно показать в этом приложении, но я не знаком с поиском продуктов в приложении Ionic.Поэтому я много искал и получал панель поиска In 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);
    });
  }

Консоль - это множество продуктов.Итак, я хочу применить поиск этих продуктов, используя название продукта.Любая помощь очень ценится.

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

Answer 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