在下面过滤函数的代码片段不起作用。组件HTML:
<div class="products-page">
<div class="grid">
<div class="col-3">
<h4>Categories</h4>
<div class="p-field-checkbox" *ngFor="let category of categories">
<label for="{{category.id}}">{{category.name}}</label>
<p-checkbox
[(ngModel)]="category.checked"
binary="true"
[inputId]="category.id"
(onChange)="categoryFilter()"
></p-checkbox>
<label for="{{ category.id }}">{{ category.name }}</label>
</div>
</div>
<div class="col-9">
<div class="grid" *ngIf="products">
<div class="col-4" *ngFor="let product of products">
<eshop-frontend-product-item [product] ="product"></eshop-frontend-product-item>
</div>
</div>
</div>
</div>
组件TS：
import { Component, OnInit } from '@angular/core';
import { ProductsService } from '../../services/products.service';
import { Product } from '../../models/product';
import { CategoriesService } from '../../services/categories.service';
import { Category } from '../../models/category';
@Component({
selector: 'eshop-frontend-products-list',
templateUrl: './products-list.component.html',
styles: [
]
})
export class ProductsListComponent implements OnInit {
isChecked = false
products: Product[] = [];
categories: Category[] = [];
constructor(private prodService: ProductsService, private catService: CategoriesService) { }
ngOnInit(): void {
this._getProducts();
this._getCategories();
}
private _getProducts(categoriesFilter?: string[]) {
this.prodService.getProducts(categoriesFilter).subscribe((resProducts) => {
this.products = resProducts;
});
}
private _getCategories(){
this.catService.getCategories().subscribe(resCats =>{
this.categories = resCats;
})
}
categoryFilter() {
const selectedCategories: string | any = this.categories
.filter((category) => category.checked)
.map((category) => category.id);
this._getProducts(selectedCategories);
}
}
产品服务：
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '@env/environment';
import { Product } from '../models/product';
@Injectable({
providedIn: 'root',
})
export class ProductsService {
apiUrlProducts = environment.apiURL + 'products';
constructor(private http: HttpClient) {}
getProducts(categoriesFilter?: string[]): Observable<Product[]> {
let params = new HttpParams();
if (categoriesFilter) {
params = params.append('categories', categoriesFilter.join(','));
}
return this.http.get<Product[]>(this.apiUrlProducts, { params: params });
}
createProduct(productData: FormData): Observable<Product> {
return this.http.post<Product>(this.apiUrlProducts, productData);
}
getProduct(productId: string): Observable<Product> {
return this.http.get<Product>(`${this.apiUrlProducts}/${productId}`);
}
updateProduct(productData: FormData, productid: string): Observable<Product> {
return this.http.put<Product>(`${this.apiUrlProducts}/${productid}`, productData);
}
deleteProduct(productId: string): Observable<any> {
return this.http.delete<any>(`${this.apiUrlProducts}/${productId}`);
}
getProductsCount(): Observable<number> {
return this.http
.get<number>(`${this.apiUrlProducts}/get/count`)
.pipe(map((objectValue: any) => objectValue.productCount));
}
getFeaturedProducts(): Observable<Product[]>{
return this.http.get<Product[]>(`${this.apiUrlProducts}/get/featured/`);
}
}
错误：
[(ngModel(]＝"；category.checked"；类型"Category"上不存在属性"checked"；
[inputId]＝"；category.id"；类型"string|undefined"不可分配给类型"string"。类型"undefined"不可分配给类型"string">
在后台，我没有选中的字段，我的印象是没有必要添加它，我也看到了几个例子，其中这没有实现，仍然可以正常工作。我已经学了很长时间了，似乎没有什么有用的东西，你能给我建议吗？
-
[(ngModel(]="category.checked"；类型"Category"上不存在属性"checked"；
如果有一个名为checked的属性，则可以在import { Category } from '../../models/category';中签入接口。否则；"已检查"；属性添加到类别接口。
-
[inputId]="category.id"；类型"string|undefined"不可分配给类型"string"。类型"undefined"不可分配给类型"string"。
再次检查您的Category接口，可能是属性"；id"；具有类似字符串|undefined的类型。删除"|"未定义的"；它真的很管用。
models/category.ts:
export class Category {
id?: string;
name?: string;
icon?: string;
color?: string;
checked?: boolean;
}