How to increase the count individually?

Question

In my project, there are different individuals who are standing for election and thus want to increase the count of there vote individually. But whenever i am clicking even on a single card all the remaining cards are incremented automatically.Anyone please suggest.

I am using AngularJs 7. Following is the component.html file

<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

Jacopo Sciampi Jacopo Sciampi · Accepted Answer · 2018-12-21T10:46:19

Use an unique property, even if it's custom, to do that. (I've over-semplified the example so you can understand better).

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--;
  }

Simple 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

How to increase the count individually?

1 Answers