0

我目前正在处理购物车，我想将在购物车页面上输入的数量和其他数据传递到结帐页面。我尝试了不同的方法，但我无法得到它。

这是我的Cart.component.ts

export class CartComponent implements OnInit {
  @Input()
  @Output() quantityChange = new EventEmitter();

 
  constructor(
    private data: DataService,
    private rest: RestApiService,
    private router: Router,
  ) {}

  
  async ngOnInit() {
    this.cartItems.forEach(data => {
      this.quantities.push(1);
    });
  }
   valueChanged(){
     this.quantities = this.quantities
     this.quantityChange.emit(this.quantities)
   }

和我的cart.component.html

<div class="col-1 mt-5 mt-md-0 p-0 induc">
  <input type="number" class="form-control text-left boy" 
 [(ngModel)]="quantities[i]">
</div>            
...
<h5 class="text-right">Total:
  <span class="ml-1 font-weight-bold text-danger"> ₦ {{ cartTotal}}
  </span>
</h5>

谢谢

4

1 回答 1

0

首先，您的代码中似乎缺少某些内容，例如 invoke valueChange、 emptyinput等。但这在某种程度上是有关父子交互的常见问题。

您已经通过在子项中定义输出建立了一半的交互quantityChange。现在您只需要在父级中捕获该输出。像这样的东西应该工作，

checkout-page.component.html（假设app-cart是组件名）

...
<app-cart (quantityChange)="cartQuantityChange($event)"></app-cart>
...

结帐-page.component.ts

export class CheckoutPage {
  ...
  cartQuantityChange(quantities: number[]) {
    // do something with quantities
  }
  ...
}

Angular Docs - 组件交互

于 2020-07-20T02:05:22.607 回答