[英]Error TS2554 Angular Project Expected 4 arguments but got 3
服务
然后出现错误,以前工作正常。 但是在更新@angular/cli 之后,ng serve 出现了问题。
src/app/pages/products/products.component.html:17:32 中的错误 - 错误 TS2554:预期 4 个参数,但得到 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', ~~~~~~~~~ 组件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;
}
}
}
您忘记将“属性联系人”参数发送到“查找”管道,“查找”转换函数期待 4 个参数(产品和 3 个参数)。
*ngFor="let product of productList | find: 'name': searchName: **"propertyContact**" | category: 'categoryID': searchCat">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.