类型错误：“ctx.cart 未定义”

Question

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

我为每个用户都有一个购物车，每个购物车包含以下详细信息：cart.ts

import { CartItem } from './cartitem';

export class Cart {
    id: string;
    user: string;
    cartitems: CartItem[];
    grand_total: number;
}

用户可以从菜单中添加项目，这将成为我的购物车项目：cartitem.ts

import { Topping } from './topping';
export class CartItem {
    id: string;
    name: string;
    baseprice: number;
    toppings: Topping[];
    extraprice: number;
    quantity= 1;
    total: number;
}

因此，在向购物车添加商品时，我在用户购物车上的 API 端点上发出 PUT 请求，以放置购物车商品，作为响应，我将从那里返回购物车内容。

这是我的 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' 绑定，它会生成此错误- ERROR TypeError: "ctx.cart is undefined"。

我对如何解决这个问题一无所知。

编辑：这是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稍后在订阅解析时填充。

一个快速的解决方法可能是将它包装在 an 中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。使用这个吸气剂

get cartCartitems() { return (cart && cart.cartitems) ? cart.cartitems : [] }

和替换的所有实例cart.cartitems与cartCartitems您的HTML

希望能帮助到你！

Answer 2

我用以下方法解决了这个问题：

cart: Cart = {} as Cart;

代替：

cart: Cart;