Как сопоставить канал с категорией в группе форм

Question

Я пытаюсь отфильтровать товары, введя слово в строку поиска, и, если свойство формы категорий соответствует поисковому запросу, ограничьте количество товаров только этой категорией.

Я могу добавить все товары в значение параметра, но я получаю сообщение об ошибке, в котором говорится, что не может прочитать свойство «старты» с неопределенными

консольными журналами

Пользовательский канал:

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, я получаю новые ошибки в консоли:

журналы консоли 2

Answer 1

У вас есть несколько пустых записей для категории как "" .

Следовательно, это утверждение let categoryName:string=value[i].category сохраняет categoryName как undefined потому что в value[i].category.

нет значения. Это условие проверки if(categoryName.startsWith(cName)) не выполняется из-за вышеуказанной проблемы.

Обработайте неопределенные значения, выполнив if(categoryName && categoryName.startsWith(cName)).