Error TS2554 Angular Project Expected 4 arguments but got 3

Question

ng serve

then there was an error, was working fine previously. But after updating @angular/cli there was a problem with the ng serve.

ERROR in src/app/pages/products/products.component.html:17:32 - error TS2554: Expected 4 arguments, but got 3.

17 *ngFor="let product of productList | find: 'name': searchName | category: 'categoryID': searchCat"> ~~~~~~~~~~~~~

src/app/pages/products/products.component.ts:10:16 10 templateUrl: './products.component.html', ~~~~~~~~~ Error occurs in the template of component ProductsComponent.

This is the product.component.html

<h1 class=text-center>Products</h1>
<div class='container text-center'>
    <select [(ngModel)]="searchCat">
        <option value='0'>
            No Filter
        </option>
        <option *ngFor="let x of categoryList" value="{{x.categoryID}}">
            {{x.name}}
        </option>
    </select>

    Search: <input type="text" [(ngModel)]="searchName">
</div>
<hr>
<div class="card-deck">
    <div class="col-sm-6 col-lg-4 mb-3"
        *ngFor="let product of productList | find: 'name': searchName | category: 'categoryID': searchCat">
        <img class="card-img-top" height=500px src={{product.imageURL}} alt="Card image cap">
        <div class="card-body"> {{product.name}} <br> {{product.brand}}</div>
        <div class="card-action"><button (click)="onViewDetail(product.productID)" class="btn btn-success">View
                Detail</button></div>
    </div>
</div>

This is the product.component.ts


import { Component, OnInit, Input } from '@angular/core';
import { CategoryService } from "../../services/category.service";
import { ProductService } from "../../services/product.service";
import { Product } from "../../models/product.model"
import { Router } from '@angular/router';
import { Category } from '../../models/category.model'

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
  providers: [CategoryService, ProductService]
})
export class ProductsComponent implements OnInit {

  searchName: string = "";

  productList: Product[] = [];

  categoryList: Category[] = [];

  searchCat: number = 0;

  constructor(public categoryService: CategoryService, public productService: ProductService, public router: Router) { }

  ngOnInit() {

    this.productList = this.productService.getProducts();
    this.categoryList = this.categoryService.getCategories();
    console.log(this.productList)
    console.log(this.categoryList)
  }
  onViewDetail(productID: number) {
    this.router.navigate(['/product-detail', productID])
  }


}

find pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'find'
})
export class FindPipe implements PipeTransform {
  //filter the result by sth
  transform(value: any, propertyName: string, searchStr: string, propertyContact: string): any {

    if (value.length === 0 || searchStr.trim().length === 0) {
      return value;
    }

    //matching
    let resultArr = [];

    searchStr = searchStr.toLowerCase()

    for (let elem of value) {
      const str = elem[propertyName].toLowerCase();



      if (str.indexOf(searchStr) != -1) {
        //found matching
        resultArr.push(elem);
      }



    }


    return resultArr;



  }

}

category pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'category'
})
export class CategoryPipe implements PipeTransform {

  transform(value: string, propertyName: string, categoryID: number): any {
    let resultArr = [];
    if (categoryID == 0) {
      return value;
    }
    else {
      for (let x of value) {
        if (x[propertyName] == categoryID) {
          resultArr.push(x)
        }

      }
      return resultArr;
    }

  }

}

ran j ran j · Accepted Answer · 2020-02-15T19:54:58

You forgot to send "property Contact" param to "find" pipe, "find" transform function looks forward for 4 params (product and 3 args).

  *ngFor="let product of productList | find: 'name': searchName: **"propertyContact**" | category: 'categoryID': searchCat">

Error TS2554 Angular Project Expected 4 arguments but got 3

1 Answers