我想把一个对象传递给子组件。我已经做了一切，但什么都不起作用。（ANGULAR）

18 浏览
0 Comments

我想把一个对象传递给子组件。我已经做了一切，但什么都不起作用。（ANGULAR）

这是父组件：我将所有数据从父组件传递给了主页面组件。

import { Component, OnInit } from '@angular/core';
import { Product } from '../Model/Product';
import { ProductService } from '../ProductsService/product.service';
@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.css'],
})
export class ParentComponent implements OnInit {
    products: Product[] = [];
    cartList: Product[] = [];
    constructor(private productService: ProductService) {
        this.products = this.productService.getProducts();
    }
    ngOnInit(): void {}
    addCart(product: Product) {
        this.cartList.push(product);
    }
}

(模板)





import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../../ProductsService/product.service';
import { Product } from '../../Model/Product';
@Component({
    selector: 'app-main-page',
    templateUrl: './main-page.component.html',
    styleUrls: ['./main-page.component.css'],
})
export class MainPageComponent {
    @Input() products: Product[] = [];
    @Output() addCart: EventEmitter = new EventEmitter();
    constructor(private productService: ProductService) {
        this.products = this.productService.getProducts();
    }
    addToCartList(product: Product) {
        this.addCart.emit(product);
    }
}

(模板)

正如您注意到的，这里有一个点击按钮，我通过将该方法发送到父组件，以便将其值传递给另一个子组件。



    
        
        
        
        Document
    
    
        

                
    
                    store pictures
                    
  • {{ product.name }}
    • 
                    
  • {{ product.type }}
    • 
                    
  • {{ product.available }}
    • 
                    
  • {{ product.price }}
    • 
                    
                

        

    



import { Component, Input, OnInit } from '@angular/core';
import { Product } from 'src/app/Model/Product';
@Component({
    selector: 'app-cart-list',
    templateUrl: './cart-list.component.html',
    styleUrls: ['./cart-list.component.css'],
})
export class CartListComponent implements OnInit {
    constructor() {
        console.log(this.cartList);
    }
    @Input() cartList: Product[] = [];
    ngOnInit(): void {}
}

为什么我无法使用cartList中的任何值？

0

3 答案

0 Comments

问题的原因是作者试图将一个对象传递给一个子组件，但是尝试了各种方法都没有成功。解决方法是使用一个服务来在组件之间进行数据通信。

首先，作者建议创建一个名为CartService的服务。在这个服务中，创建一个名为cart$的BehaviorSubject，用来存储购物车中的商品列表。然后，添加一个add方法，用来向购物车中添加商品，并使用pipe操作符和take(1)操作符来确保只订阅一次。最后，添加一个clear方法，用来清空购物车。

在购物车组件中，将cart$属性指定为CartService中的cart$属性。然后，在视图中使用*ngFor指令遍历cart$属性，并使用async管道来处理异步数据。

在产品组件中，将addToCartList函数改为调用CartService的add方法来添加商品到购物车。

最后，另一个开发者提到了一些关于使用BehaviorSubject的问题，并建议使用Subject来代替。他还提到了将Subject作为Observable暴露给组件监听变化的最佳实践。

总结起来，通过创建一个服务来进行组件间的数据通信，可以解决作者遇到的问题。这种方法可以确保数据的一致性，并且遵循RxJs的最佳实践。

0
0 Comments

在Angular中，有一个问题是当我们尝试将对象传递给子组件时，子组件中的对象始终为空。这是因为组件的输入是在组件初始化期间设置的，而构造函数在此之前执行。因此，如果要检查 cartList 是否被正确设置，应该在 OnInit 钩子中将其打印出来。

为了解决这个问题，可以在 CartListComponent 中使用一个 setter 来打印出值。此外，当尝试向购物车添加一个项目时，可能会出现组件无法正确重新渲染的情况，这是因为 Angular 在比较引用而不是值时检测变化。所以当执行 this.cartList.push(product) 时，实际上并没有改变数组的引用，而是改变了其值。为了解决这个问题，可以尝试将一个全新的数组赋值给变量，将旧数组复制过来。

然而，更好的解决方法是创建一个 CartService，将购物车的逻辑集中到一个地方，而不是试图创建一个混乱的父子组件之间的通信。通过创建一个 CartService，可以简化所有操作，并将购物车的逻辑集中到一个地方。

首先，在 CartService 中创建一个 BehaviorSubject，用于保存购物车的状态。然后，在组件中注入并使用该服务。通过使用 cartService.cart$ 可以获取到购物车项目的列表，通过 cartService.addToCart(item) 可以将物品添加到购物车中。

以上就是解决这个问题的原因和方法。通过将逻辑集中到一个地方，我们可以简化代码并解决组件间通信的问题。

0
0 Comments

在这个问题中，原因是没有正确地将对象传递给子组件。解决方法是使用一个简单的Angular服务来处理传递对象的需求。

首先，我们创建一个名为ProductService的服务来模拟应用程序，该服务返回一个Product数组，其中每个产品都有一个名字。

接下来，我们创建一个名为CartService的服务来存储购物车列表项，并提供添加和删除功能。

然后，我们创建一个名为MainPageComponent的组件，它通过ProductService获取产品，并可以将产品添加到购物车中。

最后，我们创建一个名为CartListComponent的组件，它显示购物车中的产品，并可以从购物车中删除产品。

通过使用这些服务和组件，我们可以在父组件中实例化其他组件，并正确地传递对象给子组件。

这是解决该问题的完整代码。

0