javascript - 类型错误 : "ctx.cart is undefined"

Question

我正在开发披萨订购应用程序，目前我正在尝试实现购物车。

我为每个用户都有一个购物车，每个购物车都包含以下详细信息: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

Answer 1

添加的 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 中

希望能帮助到你!