Как изменить значение свойства в итерируемом объекте?

Question

[Danya Kozlovskiy]

Привет, делаю цикл по массиву и вывожу оттуда объекты. Как привязать к кнопкам увеличение\уменьшение значения ( item.count ) соответствующего свойства объекта.

Пример кода:

<div *ngFor="let item of items">
  <p>{{item.name}}</p>
  <p>{{item.count}}</p>
  <button>increment</button> // увеличить item.count
  <button>decrement</button> // уменьшить item.count
</div>

Answer 1

[0xD34F]

updateCount(item, change) {
  item.count += change;
}

<button (click)="updateCount(item,  1)">+</button>
<button (click)="updateCount(item, -1)">-</button>

Answer 2

[Sun_Day]

export class AppComponent {
  public items = [
    {
      name: "Ivan",
      count: 2
    },
    {
      name: "Petr",
      count: 14
    }
  ];

  public increment(index) {
    this.items[index].count += 1;
  }

  public decrement(index) {
    this.items[index].count -= 1;
  }
}

<div *ngFor="let item of items; index as i">
  <p>{{item.name}}</p>
  <p>{{item.count}}</p>
  <button (click)="increment(i)">increment</button>
  <button (click)="decrement(i)">decrement</button>
</div>