在 ngFor (Angular 2) 中仅递增一个项目

Question

我正在尝试创建一个带有离子 2 和角度 2 的小购物车。现在，这是我的代码：

前面：

 <ion-card *ngFor="let person of people;let i = index" >
        <ion-card-header>{{person.name.first}} {{person.name.last}} {{i}}</ion-card-header>
        <ion-item>
        <ion-icon name="add-circle" (click)="incrementQty(i)" item-right></ion-icon>
        <ion-input type="number" min="1" [value]="qty" [(ngModel)]="qty"></ion-input>
        <ion-icon name="remove-circle"(click)="decrementQty(i)" item-right></ion-icon>
        </ion-item>
</ion-card>

.ts 文件 ：

incrementQty(index:number){
  console.log(this.people[index]);
  this.qty += 1;
}

我的问题是我只想增加点击的元素，而不是全部！

我是 angular 2 的新手，不知道如何处理这个问题，所以感谢您的帮助！

Answer 1

我可以想到两种可能的解决方案：

选项 1

让qty成为person对象的属性，并在incrementQty方法中执行this.people[index].qty += 1

private quantities: number[];
constructor() {
  this.people = this.people.map(person => {
     person['qty'] = 0;
     return person
  });
}
incrementQty(index:number){
  this.people[index].qty += 1;
}

.HTML：

<ion-card *ngFor="let person of people;let i = index" >
        <ion-card-header>{{person.name.first}} {{person.name.last}} {{i}}</ion-card-header>
        <ion-item>
        <ion-icon name="add-circle" (click)="incrementQty(i)" item-right></ion-icon>
        <ion-input type="number" min="1" [value]="person.qty" [(ngModel)]="person.qty"></ion-input>
        <ion-icon name="remove-circle"(click)="decrementQty(i)" item-right></ion-icon>
        </ion-item>
</ion-card>

选项-2

在组件代码中（可能在constructor）中创建qty数组。数组的大小应与people数组的大小相同。将初始值设置为 0。在代码中，可以增加索引处数组中的数量，与人员数组中人员索引相同。

private quantities: number[];
constructor() {
  this.quantities = new Array(this.people.length);
  this.quantities= this.quantities.map((el: any) => 0);
}
incrementQty(index:number){
  this.quantities[index] += 1;
}

.HTML：

<ion-card *ngFor="let person of people;let i = index" >
        <ion-card-header>{{person.name.first}} {{person.name.last}} {{i}}</ion-card-header>
        <ion-item>
        <ion-icon name="add-circle" (click)="incrementQty(i)" item-right></ion-icon>
        <ion-input type="number" min="1" [value]="quantities[i]" [(ngModel)]="quantities[i]"></ion-input>
        <ion-icon name="remove-circle"(click)="decrementQty(i)" item-right></ion-icon>
        </ion-item>
</ion-card>

Answer 2

您需要每个person一个qty值，目前整个组件只有一个

。

qty:number[];

loadPeople(){ 
  this.peopleService.load()
  .then(data => { 
    this.people = data; 
    this.qty = new Array(this.people.length);
  }); 
}
incrementQty(index:number){
  console.log(this.people[index]);
  this.qty[index] += 1;
}

<ion-card *ngFor="let person of people;let i = index" >
        <ion-card-header>{{person.name.first}} {{person.name.last}} {{i}}</ion-card-header>
        <ion-item>
        <ion-icon name="add-circle" (click)="incrementQty(i)" item-right></ion-icon>
        <ion-input type="number" min="1" [value]="qty[i]" [(ngModel)]="qty[i]"></ion-input>
        <ion-icon name="remove-circle"(click)="decrementQty(i)" item-right></ion-icon>
        </ion-item>
</ion-card>