Блог

Я создал простой код, используя JavaScript для фильтрации данных из продукта в Angular 10. Но onkeyup в html не распознает функцию поиска в typescript. В чем может быть проблема?

URL-адрес StackBlitz: https://stackblitz.com/edit/angular-ivy-scaucq?file=src/app/app.component.html

 <input type="text" id="myInput" (keyup)="search()" placeholder="Search for product.." title="Type in a name">
  

Используйте (keyup) вместо onkeyup .

Согласно вашему примеру, было бы лучше так app.component.html

 <input
  type="text"
  id="myInput"
  (keyup)="search($event.target)"
  placeholder="Search for product.."
  title="Type in a name"
/>

<ul id="myProduct" *ngFor="let product of filteredProducts">
  <li>
    <a href="#">{{ product.name }}</a>
  </li>
</ul>
  

app.component.ts

 import { Component, OnInit, VERSION } from '@angular/core';
import { Product } from './product';
import { ProductGroup } from './product-group';
import { ProductService } from './services/product.service';
// import * as var from 'jquery';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor(private productService: ProductService) {}
  product: Product[];
  productGroup: ProductGroup[];
  availableProducts: Product[];
  filteredProducts: Product[];

  search(e) {
    this.filteredProducts = this.availableProducts.filter(
      (p) => p.name.toUpperCase().indexOf(e.value.toUpperCase()) > -1
    );
  }

  getProduct() {
    this.productService.getProductsSmall().then((products) => {
      this.availableProducts = products;
      this.filteredProducts = products;
    });
  }
  ngOnInit() {
    this.getProduct();
  }
}
  

Вам нужно использовать (keyup) , и я не мог удержаться, чтобы просмотреть ваш код. Использование document.getElement и так далее — это не угловой способ делать вещи. Это можно сделать намного проще. Пожалуйста, взгляните на мой Stackblitz: https://stackblitz.com/edit/angular-ivy-4bgobb?file=src/app/app.component.ts

 <input type="text" id="myInput" (keyup)="search(searchTerm)" [(ngModel)]="searchTerm"  placeholder="Search for product.." title="Type in a name">


<ul id="myProduct" *ngFor="let product of shownProducts">
    <li><a href="#">{{product.name}}</a></li>
</ul>
  

 constructor(private productService: ProductService) {}
  product: Product[];
  productGroup: ProductGroup[];
  availableProducts: Product[];
  shownProducts: Product[];

  public searchTerm = "";

  search(searchValue: string) {
    this.shownProducts = this.availableProducts.filter((product: Product) => product.name.toLowerCase().includes(searchValue.toLowerCase()));
  }

  getProduct() {
    this.productService
      .getProductsSmall()
      .then(products => ((this.availableProducts = products), this.search("")));
  }
  

Я добавил [(ngModel)] в ваш шаблон и заменил ваш javascript функцией фильтра.