Javascript 下拉数据中的过滤器-角度6

我希望Angular应用程序从下拉列表中筛选数据，产品列表与产品编号关联。下面是JSON结构

组件。ts

productlistArray=[{
编号：“1”，
产品列表：[
{name:“乘积_1_0”}，
{name:“product_1_1”}
]
}, {
编号：“2”，
产品列表：[
{name:“product_2_0”}，
{name:“product_2_1”}
]
}];
onclickx（）{
this.consoleMessages+=“调用此函数”；
}

我有一个输入框（按产品搜索）。当我输入产品编号时，它必须仅列出产品编号下的产品

component.html

{{product.productlist}

pipe.ts

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“产品过滤器”，
纯：真的
})
导出类ProductFilter实现PipeTransform{
转换（数据：任意[]，搜索项：字符串）：任意[]{
返回data.filter（productlistArray=>（productlistArray.number==searchTerm））；
}
}

最初，当没有输入

搜索词时，它将是
未定义的
，因此过滤器不会返回任何
数据
。如果没有
searchTerm
，则添加一个条件以返回所有
数据。正如@AJT82在评论中所提到的，该逻辑也应该放在组件中

filteredProducts:any；//理想情况下，您应该创建一个接口
搜索词：字符串；
过滤器（）{
this.filteredProducts=this.searchTerm？this.productlistArray.filter（productlistArray=>productlistArray.number==this.searchTerm）：this.productlistArray；
}

注意：对于
表单控件
，使用
值更改
实现相同的效果

然后在
输入的
change
上调用此函数



并在模板中使用
filteredProducts


{{product.productlist}
您的代码有什么问题？您在哪里使用管道？请阅读：因此，首先，将逻辑移到组件：）顺便说一句，
产品。productlist
是一个对象数组，问题中没有提到这一点。你到底想在下拉列表中显示什么？我想显示与输入的产品编号相关的所有产品。因此，不需要管道，而是我创建了一个接口。我不确定创建接口将如何解决此问题。此外，对于多个产品名称，不能使用相同的
值
。