[英]How to add data in a method in Typescript using interface?
我正在做一個購物車測驗,在單擊添加按鈕時,產品詳細信息使用事件發射器從子級傳遞到父級並傳遞到組件,但我無法理解如何將其添加到購物車? 由於產品和購物車界面中的屬性不匹配,它在下面的 addproduct 方法中顯示錯誤
addproduct(product: Product){this.cart.items.push(product)}
拋出錯誤:(參數)產品:“產品”類型的產品參數不可分配給“CartItem”類型的參數。 “產品”類型缺少“CartItem”類型的以下屬性:項目、數量 (2345)
export class AppComponent {
products: Product[];
cart: Cart;
constructor() {
this.cart = {
items: []
} as Cart
}
ngOnInit() {
this.products = [...PRODUCTS].map((product, index) => {
product.id = index + 1;
product.image = `/assets/images/items/${product.name.toLocaleLowerCase()}.png`;
product.cartQuantity = 0;
return product;
});
addToCart(product: Product) {
this.cart.items.push(product);
}
**cart.ts**
export interface CartItem {
id: number;
item: string;
quantity: number;
}
export interface Cart {
items: CartItem[];
}
**Product.ts**
export interface Product {
name: string;
price: number;
id?: number;
image?: string;
cartQuantity?: number;
}
export enum UpdateMode {
SUBTRACT,
ADD
}
app.component.html
<app-product-list [products]="products"
(onAddToCart)="addToCart($event)"
(onQuantityUpdate)="updateCart($event)"
class="flex-70"></app-product-list>
<app-cart class="flex-30" [cart]="cart"></app-cart>
如何將產品發送到 cart.component.ts 文件中的輸入屬性
export class CartComponent implements OnInit{
@Input() cart: Cart;
constructor() {}
您好,錯誤是因為您試圖將 Product 類型的產品分配給 Cart 類型。 兩者內部都有不同的密鑰,並且都是強制性的。 乍一看,您可以像這樣重構它,它應該可以工作。
addToCart({id, name, cartQuantity}: Product) {
let cart: CartItem = {
id,
item: name,
quantity: cartQuantity
};
this.cart.items.push(cart);
console.log(this.cart)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.