Question

我正在开发包含清单项目和购物车项目的购物应用程序我制作了一个称为“增量”的变量，每次点击添加按钮时，该计数就为1

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

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

我父母的HTML：

{% extends "universal/header.html" %}
{% block content %}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="forms-content">
    <div class="tab-content" id="pills-tabContent">
            <p></p>
            <img class="mb-4" src="/static/FWIcon.png" alt="" width="100" height="100">
            <p></p>
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            <form action="/change/action/" method="POST">
                            <p class="formtitle">Change Lookup</p>
                            <p></p>
                                    {% csrf_token %}
                                    <div class="form-group">
                                    <label class="fieldtitle"> Search Results </label>
                                    <table class="table">
                                    {{ data }}
                                    <thead>
                                    <th scope="col">a</th>
                                    <th scope="col">b</th>
                                    <th scope="col">c</th>
                                    <th scope="col">d</th>
                                    </thead>
                                    </table>
                                    </div>
                    <a href="/change/" class="btn btn-primary" >Submit</a>
            </form>
            </div>
    </div>
</div>
</main>
{% endblock %}

父母TS：

<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 ListComponent implements OnInit {
constructor(
private getItemsService: JustCleanServiceService,
private spinner: NgxSpinnerService
) { }
items:any = {};
increment: number = 0;
total: number = 8;  
ngOnInit() {
this.getItems();
}
getItems() {
this.spinner.show() 
this.getItemsService.getItems().subscribe(
  res => {
    console.log(res)
    if (res) {
      this.items = res;
      this.spinner.hide();          
    }
  }
)
}
addToCart() {
this.increment++;
this.increment + this.total;
console.log(this.increment);
}
removeFromCart() {
this.increment--;
if(this.increment == -1) {
  this.increment++;
}
}
}

子HTML：

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

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

API链接： http://5a12745f748faa001280a746.mockapi.io/v1/stores/item

Answer 1

对于第二个问题，使用@Input Decorative绑定变量。在这里阅读->

https://angular.io/api/core/Input

您的第一个问题对我来说不是很清楚，但是addToCart（）看起来模棱两可。在这里，您要添加总计和增量，但没有将其分配到任何地方，为什么？也许您的问题出在这条线上，或者可能是故意的。

每个产品的计数分离问题Angular4

1 个答案: