如何单独增加计数？

Posted 2023-02-23

【中文标题】如何单独增加计数？

【英文标题】：How to increase the count individually?

【发布时间】：2019-05-21 20:04:40

【问题描述】：

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

我正在使用 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 

【参考方案1】：

使用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

【讨论】：

谢谢 Jacopo Sciampi 先生。这解决了我的问题。

完美。如果您认为这正是您所需要的，您可以接受这个答案。圣诞快乐。

也祝你圣诞快乐。