Necesito filtrar el key "popular" igual a TRUE, para que en el ngFor me muestre solamente los objetos que tenga popular en true.
Este es mi json sv:
"products": [
{
"name": "Bahamas",
"price": "680",
"category": "URAMAKIS - ROLLS",
"description": "Roll relleno de Palta y Philadelphia envuelto en Salmón Rosado.",
"image": "https://www.sushi-lives.com.ar/wp-content/uploads/2017/09/pieza8-510x340.jpg",
"id": 1,
"popular": true
},
{
"name": "New Zeland",
"price": "682",
"category": "URAMAKIS - ROLLS",
"description": "Roll relleno de Salmón y Philadelphia envuelto en Palta.",
"image": "https://www.sushi-lives.com.ar/wp-content/uploads/2017/09/pieza6-510x340.jpg",
"id": 2
}
Estuve intentando lo siguiente:
PIPE:
@Pipe({ name: 'filterArray' })
export class filterArray implements PipeTransform {
transform(pages: any[], [key] : any) {
return pages.filter(page => {
return page[key] === true; // <------
});
}
}
COMPONENTE.TS:
export class HomeComponent implements OnInit {
popularProducts: undefined | Product[];
trendyProducts:undefined | Product[];
constructor( private product: ProductService ) { }
ngOnInit(): void {
this.product.trendyProducts()
.subscribe((data)=>{
this.trendyProducts=data;
})
}
}
COMPONENTE.HTML:
<div class="col-sm-3" *ngFor="let item of trendyProducts | filterArray:'popular'">
<div class="product-item">
<img src="{{ item.image }}" alt="">
<div class="product-details">
<h6 class="name-head">{{ item.name }}</h6>
<div class="product-price">
<h6>Precio: {{ item.price }}</h6>
</div>
</div>
<div class="product-footer">
<a routerLink="/details/{{ item.id }}">View Details</a>
</div>
</div>
</div>
Pero en el html me entrega el siguiente error: "Argument of type 'Product[] || undefined' is not assignable to parameter of type "any[]". Type "undefined" is not assignable to type "any[]"
Mi llamada al servicio es la siguiente:
trendyProducts() : Observable<Product[]>{
return this.http.get<Product[]>('http://localhost:3000/products?_limit=4');
}
Y mi interface es esta:*
export interface Product {
name: string,
price: number,
category: string,
description: string,
image: string,
id: number,
popular: boolean}