Angular 10中的Javascript函数不工作

我已经使用JavaScript创建了简单的代码来过滤Angular 10中产品的数据。但是html中的onkeyup不能识别typescript中的搜索函数。有什么问题吗

StackBlitz URL:

---

使用

（keyup）

而不是

onkeyup

根据您的示例，这样会更好

app.component.html

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：

构造函数（私有产品服务：产品服务）{
产品:产品【】;；
productGroup:productGroup[]；
可用产品：产品[]；
展示产品：产品[]；
公共搜索词=”；
搜索（searchValue:string）{
this.shownProducts=this.availableProducts.filter（（product:product）=>product.name.toLowerCase（）.includes（searchValue.toLowerCase（））；
}
getProduct（）{
这是我的产品服务
.getProductsSmall（）
.then（products=>（（this.availableProducts=products）、this.search（“”））；
}

---

我已经添加了你的模板，并用函数替换了你的javascript。

似乎你也无法抗拒：D.我建议使用我的方法，因为它不太复杂。