时间戳

首页 > 解决方案 > 如何单独增加计数？

angular - 如何单独增加计数？

问题描述

在我的项目中，有不同的人正在参选，因此希望单独增加投票的数量。但是，每当我点击一张卡片时，所有剩余的卡片都会自动增加。任何人请建议。

我正在使用 AngularJs 7。以下是 component.html 文件

<mat-card-actions>
                <button mat-mini-fab color="primary" 
(click)="supportButtonclick()" color="accent" ><mat-icon>thumb_up</mat- 
icon></button>
                <button mat-mini-fab color="accent" 
(click)="unsupportButtonclick()" color="decent" ><mat- 
icon>thumb_down</mat-icon></button>               
                 <div  fxFlex.gt-sm="33.33%" class="card-text">{{ 
numberofSupport }}</div>
                <button mat-button><mat-icon>share</mat-icon></button>
            </mat-card-actions>





<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"> 
</script>
@Component({
  selector: 'app-dashboard2',
  templateUrl: './dashboard2.component.html',
  styleUrls: ['./dashboard2.component.scss']
})
export class Dashboard2Component implements OnInit {

  numberofSupport: number=0;
  supportButtonclick(){
    this.numberofSupport++;

  }
  unsupportButtonclick(){
    this.numberofSupport--;
  }

 







 <mat-card-actions><button mat-mini-fab color="primary" 
(click)="supportButtonclick()" color="accent" ><mat-icon>thumb_up</mat- 
icon></button><button mat-mini-fab color="accent" 
(click)="unsupportButtonclick()" color="decent" ><mat- 
icon>thumb_down</mat-icon></button>               
<div  fxFlex.gt-sm="33.33%" class="card-text">{{ numberofSupport }}</div>
<button mat-button><mat-icon>share</mat-icon></button>
</mat-card-actions>
Following is the component.ts file
@Component({
selector: 'app-dashboard2',
templateUrl: './dashboard2.component.html',
styleUrls: ['./dashboard2.component.scss']
})
export class Dashboard2Component implements OnInit {
numberofSupport: number=0;
supportButtonclick(){
this.numberofSupport++;
}
unsupportButtonclick(){
this.numberofSupport--;
}


My expected result is to show the individual count of individual 
candidate, when a button is clicked

标签： angular

解决方案

使用一个unique属性，即使它是自定义的，也可以做到这一点。（我已经过度简化了这个例子，所以你可以更好地理解）。

listOfCard  = [
    {
      id: 0,
      name: "card 1",
      count: 0
    },
    {
      id: 1,
      name: "card 2",
      count: 0
    },
    {
      id: 2,
      name: "card 3",
      count: 0
    },
    {
      id: 3,
      name: "card 5",
      count: 0
    },
  ]

  public addCount(id){
    let idx= this.listOfCard.findIndex(el => el.id == id);
    this.listOfCard[idx].count++;
  }

  public decreaseCount(id){
    let idx= this.listOfCard.findIndex(el => el.id == id);
    this.listOfCard[idx].count--;
  }

简单的html：

<div class="fl" *ngFor="let card of listOfCard">
  <span style="margin-right: 10px">{{card.name}}</span>
  Count: <span style="margin-right: 10px">{{card.count}}</span>
  <button (click)="addCount(card.id)">Add</button>
  <button (click)="decreaseCount(card.id)">decrease</button>
</div>

.fl{
  display: flex;
  flex-direction: row;
}

Stackbtliz：https ://stackblitz.com/edit/angular-uckb2t

推荐阅读