我正在开发披萨订购应用程序,目前我正在尝试实现购物车。
我为每个用户都有一个购物车,每个购物车都包含以下详细信息:cart.ts
import { CartItem } from './cartitem';
export class Cart {
id: string;
user: string;
cartitems: CartItem[];
grand_total: number;
}
用户可以从菜单中添加项目,这将成为我的购物车项目:caritem.ts
import { Topping } from './topping';
export class CartItem {
id: string;
name: string;
baseprice: number;
toppings: Topping[];
extraprice: number;
quantity= 1;
total: number;
}
因此,在将商品添加到购物车时,我在用户购物车的 API 端点上发出 PUT 请求,以放置购物车商品,作为响应,我从那里返 repo 物车内容。
这是我的 cart.component.ts 的样子:
import { Component, OnInit, ViewChild, Inject, Injector } from '@angular/core';
import { CartItem } from '../shared/cartitem';
import { ActivatedRoute } from '@angular/router';
import { CartService } from '../services/cart.service';
import { map, catchError } from 'rxjs/operators';
import { Cart } from '../shared/cart';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
cart: Cart;
// cartitems: CartItem[];
constructor(
private route: ActivatedRoute,
private cartService: CartService,
@Inject('BaseURL')public BaseURL) { }
ngOnInit(): void {
this.updateCart();
}
updateCart() {
this.cartService.mysubject.subscribe((value) => {
console.log(value);
this.cartService.getItems().subscribe(response => {
console.log("Response in cart comp:", response);
let cartContent = new Cart();
cartContent.cartitems = response['cartitems'];
cartContent.id = response['id'];
cartContent.grand_total = response['grand_total'];
cartContent.user = response['user'];
this.cart = cartContent;
console.log("Cart is:", this.cart);
});
});
}
}
现在的问题是我无法将 cart.component.html 端的数据与“cart”绑定(bind),它会生成此错误 - 错误类型错误:“ctx.cart 未定义”。
我对如何解决这个问题一无所知。
编辑 :
这是cart.component.html:
<h2>Cart</h2>
<div>{{cart.user}}</div>
<mat-list dense>
<mat-list-item *ngFor="let cartitem of cart.cartitems">
<h2 matLine>Item: {{cartitem.name}}</h2>
<p matLine>Base Price: ${{cartitem.baseprice}}</p>
<p matLine [hidden]="cartitem.toppings == []">Extra Toppings:
<mat-list matLine>
<mat-list-item matLine *ngFor="let topping of cartitem.toppings">
<h4 matLine>{{topping.name}} : + ${{topping.rate}}</h4>
</mat-list-item>
</mat-list>
</p>
<button mat-mini-fab color="primary"><i class="fa fa-minus-circle"></i></button><div></div><button mat-mini-fab color="primary"><i class="fa fa-plus-circle"></i></button>
</mat-list-item>
</mat-list>
<div [hidden]="!cart.cartitems"><h2>Subtotal: ${{cart.grand_total}}</h2></div>
<div [hidden]="cart.cartitems">
<p> Your Cart is Empty!</p>
</div>
和错误日志:
ERROR TypeError: "ctx.cart is undefined"
CartComponent_Template cart.component.html:2
Angular 26
executeTemplate
refreshView
refreshComponent
refreshChildComponents
refreshView
refreshComponent
refreshChildComponents
refreshView
refreshDynamicEmbeddedViews
refreshView
refreshComponent
refreshChildComponents
refreshView
renderComponentOrTemplate
tickRootContext
detectChangesInRootView
detectChanges
tick
next
invoke
onInvoke
invoke
run
run
next
schedulerFn
RxJS 5
Angular 8
core.js:6185:19
最佳答案
添加的 HTML 在 HTML 的第 2 行显示错误
<div>{{cart.user}}</div>
cart
在您的 TS 文件中定义cart: Cart;
插值
cart.user
不可用 cart
本身在初始化时是未定义的。 cart
稍后在订阅解决时填充。一个快速的解决方法可能是将它包含在
ng-container
中。并使用 *ngIf
在上面。<ng-container *ngIf="cart">
<h2...
...
</div>
</ng-container>
这将不会显示任何内容,直到
cart
已解决。但是,就更好的代码质量而言,将所有插值替换为 TS 中的 getter
get cartUser() { return (cart && cart.user) ? cart.user : null }
现在你的 HTML 就像
<div>{{cartUser}}</div>
同样的,你会得到
cart.cartitems
的错误。 .使用这个 setter/getter get cartCartitems() { return (cart && cart.cartitems) ? cart.cartitems : [] }
并替换
cart.cartitems
的所有实例与 cartCartitems
在您的 HTML 中希望能帮助到你!
关于javascript - 类型错误 : "ctx.cart is undefined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61703602/