错误 TS2554 Angular 项目预期有 4 个参数，但得到了 3 个

Question

服务

然后出现错误，之前工作正常。但是在更新 @angular/cli 之后，ng serve 出现了问题。

src/app/pages/products/products.component.html:17:32 中的错误 - 错误 TS2554：预期有 4 个参数，但得到了 3 个。

17 *ngFor="let product of productList | find: 'name': 搜索名称 |类别：'categoryID'：searchCat"> ~~~~~~~~~~~~~~~~

src/app/pages/products/products.component.ts:10:16 10 templateUrl: './products.component.html', ~~~~~~~~~ 组件ProductsComponent的模板出错。

这是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>

这是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])
  }


}

找到管道

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;



  }

}

分类管道

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;
    }

  }

}

Answer 1

您忘记将“属性联系人”参数发送到“查找”管道，“查找”转换函数期待 4 个参数（产品和 3 个参数）。

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