Как изменить этот код, чтобы писать в угловых?

Question

Так что я использовал jQuery вместе с Angular, что оказалось не очень хорошей практикой, поэтому я пытаюсь отредактировать свой код, чтобы он снова не использовал jQuery в этом приложении Angular

, поэтому яу меня есть страница пунктов меню, которая выбирает данные с сервера, и я зацикливаюсь на массиве элементов для отображения данных,

каждый элемент должен иметь счетчик для увеличения или уменьшения количества, чтобы отправить его в корзину, чтобыэто должно быть определенным для каждого элемента,

. Сейчас я использую Id для элемента, который содержит строковый индекс (num-1), и я связываю событие click с кнопкой увеличения, напримерследует

increase(id) {
  let oVal = parseInt($('#item-' + id).html());
  if (oVal < this.maxNumber) {
    $('#item-' + id).html(oVal + 1);
  }
} 

html

<div class="spinner m-2">
  <a class="btn btn-outline-secondary up" (click)="increase(item.product_id)">
      <i class="ic-add"></i>
  </a>
  <label id="item-{{item.product_id}}" class="count">
    1
  </label>
  <a class="btn btn-outline-secondary down" (click)="decrease(item.product_id)">
      <i class="ic-substract"></i>
  </a>
</div>

Так, как изменить это, чтобы использовать угловой вместо jQuery

Answer 1

пожалуйста, проверьте это.

increase(id) {
  var strId = 'item-' + id
  let oVal = parseInt(document.getElementById(strId).innerHTML);
  if (oVal < this.maxNumber) {
    var ovalIncrement:any = oVal + 1
    document.getElementById(strId).innerHTML = ovalIncrement;
  }
}

Answer 2

Вы еще не показали, как выглядит ваш массив данных, но допустим, что он выглядит так:

myArray = [
  {
    name: 'item1',
    product_id: 'aaa'
  },
  {
    name: 'item2',
    product_id: 'bbb'
  }
]

Итак, теперь вы хотите добавить свойство количества, которое вы можете сделать так:

this.myArray = this.myArray.map(item => {
  item.quantity = 0
  return item
})

Итак, теперь ваш массив выглядит так:

myArray = [
  {
    name: 'item1',
    product_id: 'aaa',
    quantity: 0
  },
  {
    name: 'item2',
    product_id: 'bbb',
    quantity: 0
  }
]

Так что теперь вы можете перебирать свой массив в своем шаблоне так:

<ng-container *ngFor="let item of array">
  <div class="spinner m-2">
    <a class="btn btn-outline-secondary up" (click)="increase(item)">
      <i class="ic-add"></i>
    </a>
    <label id="item-{{item.product_id}}" class="count">
      <span>{{ item.quantity }}</span>
    </label>
    <a class="btn btn-outline-secondary down" (click)="decrease(item)">
      <i class="ic-substract"></i>
    </a>
  </div>
</ng-container>

и в контроллере.ts файл:

increase(item) {
  if (item.quantity < this.maxNumber) {
    item.quantity ++
  }
}

decrease(item) {
  if (item.quantity > 0) {
    item.quantity --
  }
}

Answer 3

Вы должны поддерживать свойство counter в каждом объекте item.Нам нужно увеличить / уменьшить значение счетчика, когда пользователь нажимает +/-.Поэтому эти обновления должны применяться к этому конкретному объекту предмета.

elements = [{
...
quantity:1
},{
...
quantity:0
},{
...
quantity:0
}]

increase(itemObj) {
  if (itemObj.quantity < this.maxNumber) {
    itemObj.quantity++;
  }
} 

decrease(itemObj) {
  if (itemObj.quantity >0) {
    itemObj.quantity--;
  }
}