有条件地打印在有角度的html上

Question

我正在循环浏览产品列表，然后检查产品 ID 是否已经存在于产品(对象(数组中，然后打印其他数量，如果产品不在对象中，则尝试打印 0。以下是我到目前为止尝试过的代码。

<ion-item class="added" *ngFor="let item of fetchProducts();let key=index;">
<ng-container  *ngFor="let cartitem of cart" >
<span class="count" *ngIf="cartitem.p_id==item.p_id;">
{{cartitem.qty}}
</span>
</ng-container>
</ion-item>

如果item不在同一跨度的cartitem中，如何打印 0。

Answer 1

您可以使用如下所示的三元运算符简单地执行此操作。

<ng-container  *ngFor="let cartitem of cart" >
<span class="count">
{{cartitem.p_id==item.p_id ? cartitem.qty : 0 }}
</span>
</ng-container>

Answer 2

可以在 for 循环中使用 *ngIf else 条件 -

<ion-item class="added" *ngFor="let item of fetchProducts();let key=index;">
<ng-container *ngFor="let cartitem of cart">
<span class="count" *ngIf="cartitem.p_id==item.p_id; then content else other_content">
</span>
<ng-template #content>{{cartitem.qty}}</ng-template>
<ng-template #other_content>0</ng-template>
</ng-container>
</ion-item>

Answer 3

我不会使用模板逻辑，而是将逻辑移动到类中。

cart和products显然在课堂上可用。 因此，调整类中的fetchProducts函数以根据需要返回产品列表(包含数量信息(，并在模板中使用单个ngFor循环。

或者添加一个新功能getProductsWithQuantity...

在你的班级里

public getProductsWithQuantity() {
return this.fetchProducts().map(product => {
...product,
quantity: this.getQuantity(product);
});
}
private getQuantity(product) {
const foundCartItem = this.cart.find(cartItem => product.id === cartItem.id);
if (foundCartItem) {
return foundCartItem.qty;
}
return 0;
}

在您的模板中：

<ion-item class="added" *ngFor="let item of getProductsWithQuantity();let key=index;">
<span class="count">
{{item.qty}}
</span>
...