Javascript 每个产品角度的分离计数问题4

我正在开发一个购物应用程序，包含列表项目和购物车项目 我创建了一个名为increment的变量，每次单击add按钮，该变量都计数为1

第一个问题是，我正在从API循环一个数组，我需要能够使每个项目都有自己的增量变量，以便计算购物车项目中的所有项目 因为当我点击加号图标时，每个项目都很重要，我需要将它们分开

第二个问题，如何显示子组件内的项目总数？ 因为我试图通过局部变量在子组件中用静态值显示它，但它没有绑定

我的父母的HTML：

<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <app-cart #total>
     total items are:   {{total}}       
    </app-cart>
  </div>
  <ul *ngIf="items">
    <li class="padding-add" *ngFor="let item of items; let i of index">
      <div class=" col-md-12">
        <div class="col-md-4 col-sm-4 col-xs-12 padding-add">
          <img src="{{item.imageUrl}}" width="200">
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12 padding-add">
          <h4>{{item.id}}- {{item.name}}</h4>
          <h6>Material: {{item.service1}}</h6>
          <h6>Options: {{item.service2}}</h6>
          <h6>Price: {{item.service3}} $</h6>
        </div>
        <div class="col-md-2 col-sm-2 col-xs-12">
          <button (click)="addToCart()" class="btn-6 fa fa-plus"></button>
          <span>{{increment}}</span>
    <button (click)="removeFromCart()" class="fa fa-minus btn-6"></button>
  </div>
      </div>
    </li>
  </ul>
</div>
</div>
</div>

儿童TS：

export class CartComponent implements OnInit {
total: number;
constructor() { }
ngOnInit() {
}
}

子HTML：

<p>total items are:    {{total}}</p>

项目总数为：{{total}

请帮助我解决我面临的两个问题

API链接：

---

对于第二期，请使用@Input绑定变量。请在此处阅读->

---

您的第一个问题我不太清楚，但addToCart（）看起来模棱两可。在这里，您要添加总计和增量，但不在任何位置分配它，为什么？也许，您的问题在于这一行，或者可能是故意的。

我将尝试输入，第一个问题，我将给您举个例子，因为我将递增计数放在循环中，所以当我按下产品上的“添加”按钮时，所有产品都递增一，因此我需要对每个产品进行计数，你收到了吗？谢谢你的帮助。我的笔记本电脑还没有上，我会在两小时内试用，并向你更新

<p>total items are:    {{total}}</p>