My goal is to create a feature where users can adjust the number of rows in the catalog view on spiritwoodart.com. However, I encountered an issue at the initial stage of implementation and believe it stems from a basic misunderstanding. I am struggling to find assistance with my search query being unhelpful ("why can't I insert template variables in ngIf statement"). Please reach out if more information is required. Appreciate any insights, even constructive criticism for my novice skills.
When I make this adjustment:
<div *ngIf="(i+1) % n === 0"
class="w-100"></div>
And change it to:
<div #n='3' *ngIf="(i+1) % n === 0"
class="w-100"></div>
Or even try this:
<div *ngIf="(i+1) % {{3}} === 0"
class="w-100"></div>
I receive an error message like this:
compiler.js:485 Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "3" ("
[cart]="cart"></product-card>
</div>
<div [ERROR ->]#n='3' *ngIf="(i+1) % n === 0"
class="w-100"></div>
</ng-container>
"): ng:///AppModule/ProductsComponent.html@12:21
Context-template:
<div class="row">
<div class="col-3">
<product-filter [category]="category"></product-filter>
</div>
<div class="col">
<div class="row"
*ngIf="cart$ | async as cart">
<ng-container *ngFor="let p of filteredProducts; let i = index">
<div class="col">
<product-card [product]="p"
[cart]="cart"></product-card>
</div>
<div *ngIf="(i+1) % 3 === 0"
class="w-100"></div>
</ng-container>
</div>
</div>
</div>
Context-component:
import { Cart } from './../models/cart';
import { CartService } from './../cart.service';
import { Product } from './../models/product';
import { ProductService } from './../product.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
products: Product[] = [];
filteredProducts: Product[] = [];
category: string; // keep this field in this class in order to initialize it... then delegate it out
cart$: Observable<Cart>;
constructor(
private route: ActivatedRoute,
private productService: ProductService,
private cartService: CartService
) {}
async ngOnInit() {
this.cart$ = await this.cartService.getCart();
this.populateProducts();
}
private populateProducts() {
this.productService
.getAll()
.switchMap(products => {
this.products = products;
return this.route.queryParamMap;
})
.subscribe(params => {
this.category = params.get('category'); // initializing category field
this.applyFilter();
});
}
private applyFilter() {
// setting the filtered products array
this.filteredProducts = this.category
? this.products.filter(p => p.category === this.category)
: this.products;
}
}