Question

我正在制作某种购物应用程序，现在正在开发一项功能，该功能可将点击的产品添加到checkoutList中。但是，当按下某个产品时，不会发送任何数据，而我只是得到了“未定义”的信息。我制作了名为messenger.service.ts的服务，其中包含添加到按钮的功能：

export class MessengerService {
  subject = new Subject()

  constructor() {}

  sendMsg(product) {
    console.log(product)
    this.subject.next(product) // triggering an event
  }

  getMsg() {
    return this.subject.asObservable()
  }
}

产品列表，包含可以添加到checkoutList的产品的组件：

export class ProductListComponent implements OnInit {
  productList: Product[] = [];

  @Input() productItem: Product;

  constructor(private productService: ProductService, private msg: MessengerService) {}

  ngOnInit(): void {
    this.productList = this.productService.getProducts();
  }

  onAddToCheckoutList() {
    this.msg.sendMsg(this.productItem);
  }
}

监听服务的组件：

<div class="col-3" *ngFor="let product of productList">
  <a href="#" class="list-group-item clearfix" [productItem]="product" (click)="onAddToCheckoutList()">
    <span class="pull-left">
                        <img 
                        style ="height: 72px;"
                        [src]="product.imagePath"
                        alt="{{ product.name }}" >
                    </span>
    <div class="productName">
      <p> <b> {{product.name}}  </b> <br> Price: €{{product.price}}</p>
    </div>

  </a>
</div>

为了给您一些有关应用程序外观的示例，我添加了以下屏幕截图：

Answer 1

点击处理程序需要将product作为参数传递：

(click)="onAddToCheckoutList(product)"

在您的组件类中，该方法现在应该看起来像下面这样，以使用新的参数：

onAddToCheckoutList(product){
  this.msg.sendMsg(product)
}

除非问题中没有显示其他功能，否则您可能也不再需要@Input() productItem: Product。

Answer 2

尝试更改2种方式绑定[(...)]：

<div class="col-3"  *ngFor="let product of productList">
                <a href="#" 
                class="list-group-item clearfix" 
                [(productItem)]="product"
                (click)="onAddToCheckoutList()"
                >
                    <span class="pull-left">
                        <img 
                        style ="height: 72px;"
                        [src]="product.imagePath"
                        alt="{{ product.name }}" >
                    </span>
                    <div class="productName">
                        <p> <b> {{product.name}}  </b> <br>  Price: €{{product.price}}</p>
                    </div>  
                    
                </a>  
            </div>

但是通过这种方式，您的productItem将不会通过单击而始终选择productList中的最后一项

您必须以这种方式编辑逻辑代码。当您选择任何项目时，该项目将传递到onAddToCheckoutList()中，并且您将在MessengerService中调用函数add item到itemList：

在html文件中：

<div class="col-3"  *ngFor="let product of productList">
                <a href="#" 
                class="list-group-item clearfix" 
                (click)="onAddToCheckoutList(product)"
                >
                    <span class="pull-left">
                        <img 
                        style ="height: 72px;"
                        [src]="product.imagePath"
                        alt="{{ product.name }}" >
                    </span>
                    <div class="productName">
                        <p> <b> {{product.name}}  </b> <br>  Price: €{{product.price}}</p>
                    </div>  

                </a>  
            </div>

在.ts文件中：

export class ProductListComponent implements OnInit {


productList: Product[] = [];

@Input() productItem: Product

  constructor(private productService: ProductService, private msg: MessengerService) { }

  ngOnInit(): void {
    this.productList = this.productService.getProducts()
  } 

  onAddToCheckoutList(productItem){
    this.msg.sendMsg(productItem)
  }
}

如何将数据从一个div发送到另一个？

2 个答案: