Question

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

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

Answer 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

如何单独增加计数？

1 个答案: