Javascript Angular 10 中的函数不工作

Question

我使用 JavaScript 创建了简单的代码来过滤 Angular 10 中产品的数据。但是 html 中的 onkeyup 无法识别打字稿中的搜索功能。可能是什么问题？

StackBlitz URL：https://stackblitz.com/edit/angular-ivy-scaucq?file=src/app/app.component.html

Answer 1

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

使用 (keyup) 代替 onkeyup。

Answer 2

按照你的例子这样更好 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();
  }
}

Answer 3

您需要使用 (keyup)，我忍不住要查看您的代码。使用 document.getElement 等等不是 angular 做事的方式。它可以更容易地完成。请看看我的 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)] in your template and replaced your javascript with a filter功能。

Javascript Angular 10 中的函数不工作

Javascript function in Angular 10 not working

javascript

angular

angular10