如何将管道与表单组中的类别匹配

Question

我正在尝试通过在搜索栏中输入一个词来过滤产品，如果类别表单属性与搜索词匹配，则将产品限制为仅该类别。

我可以将所有产品添加到 value 参数中，但我收到一条错误消息，说无法读取未定义的“starts”属性

控制台日志

自定义管道：

if(cName===""){
  return value;
}
else{
  console.log("Value : ",value)
  console.log("cName : ",cName)
const categoryArray:any[]=[];
for(let i=0;i<=value.length;i++){
  let categoryName:string=value[i].category;
  console.log("value i . category ", value[i].category)
  let cName: string = value[i].name;
  if(categoryName.startsWith(cName)){
    categoryArray.push(value[i])
  }
}
return categoryArray;

} }

HTML：

<div style="text-align: center;">
<input type="text" [(ngModel)]="searchCategory">
</div>
<ion-list>
<ion-item *ngFor="let p of products | async |category:searchCategory" [routerLink]="[p.id]">
  <ion-thumbnail slot="start">
    <img [src]="p.img">
  </ion-thumbnail>
  <ion-label>
    {{ p.name }}
    <p>{{ p.price | currency:'USD' }}</p>
  </ion-label>
</ion-item>

ts：

products: Observable<any>;
searchCategory:string="";

和 ngOnInit：

ngOnInit() {
this.products = this.productService.getAllProducts();
console.log("all products", this.products);
}

编辑： 按照 Shubham Bhokare 的建议删除类别的空条目后，我在控制台中遇到了新错误：

console logs 2

Answer 1

"" 类别中有一些空条目。

因此，let categoryName:string=value[i].category 这条语句将 categoryName 存储为 undefined，因为 value[i].category 中没有任何值。

由于上述问题，此检查条件if(categoryName.startsWith(cName)) 失败。

通过 if(categoryName && categoryName.startsWith(cName)) 处理未定义的值。