Question

我已使用* ngFor创建3张卡，单击2 +/-按钮后，计数器应增加/减少。我已将计数器的更改值绑定到模板，但是所有卡的计数器（Cntr）都会响应它。我希望每个卡都按照相应卡上的相应按钮单击进行响应

<form [formGroup]="checkoutData" (ngSubmit)="submitData($event)">
  <div class="allCards">
    <div *ngFor="let card of cardArray; let i=index" >
      <mat-card class="example-card">
        <mat-card-header>
          <p class="productOffer">20% OFF</p>
        </mat-card-header>

          <img  mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"
            alt="Photo of a Shiba Inu">
            <mat-card-subtitle>{{card.name}}</mat-card-subtitle>
        <mat-card-content>

            <del >₹{{card.orgAmt}}</del>
            <p ngDefaultControl formControlName="discountedAmt">₹{{card.discAmt}} </p>
        </mat-card-content>


        <mat-card-actions>

          <div class="actionItems">
            <mat-form-field style="width:150px;">
              <mat-select  placeholder="Select Quantity">
                <mat-option ngDefaultControl formControlName="foodQuantity" *ngFor="let food of card.foods" [value]="food.value">
                  {{food.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <span class="add-to-cart">
              <button  mat-mini-fab color="primary" (click)="decrCntr(i)" >-</button>
              <span ngDefaultControl formControlName="foodQuantity1">{{cntr}}</span>
              <button  mat-mini-fab color="secondary" (click)="incrCntr(i)" >+</button>
            </span>
          </div>
          <button mat-button type='submit'>Add to Cart</button>

        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</form>

这是我的.ts文件，在其中我<+/-> Cntr 变量并将此值绑定在模板中

export class CartviewComponent implements OnInit {
cntr: number = 1
checkoutData: FormGroup
orgAmt: number;
discAmt: number;


constructor(private formBuilder: FormBuilder) { }

cardArray = [
{
  name: 'Onion', orgAmt: 30, discAmt: 25, counterVar: 1,
  foods: [{ value: 500, viewValue: '500gm' }, { value: 1, viewValue: '1kg' }, { value: 2, viewValue: '2kg' }],
},
{
  name: 'Potato', orgAmt: 20, discAmt: 15, counterVar: 1,
  foods: [{ value: 500, viewValue: '500gm' }, { value: 1, viewValue: '1kg' }],
},
{
  name: " beet", orgAmt: 10, discAmt: 8, counterVar: 1,
  foods: [{ value: 500, viewValue: '500gm' }, { value: 1, viewValue: '1kg' }, { value: 2, viewValue: '2kg' }],
 }
]

ngOnInit() {
this.checkoutData = this.formBuilder.group({
  discountedAmt: [null, Validators.required],
  foodQuantity: [null, Validators.required],
  foodQuantity1: [null, Validators.required],
})

}

decrCntr(cntrMain) {
if (this.cntr != 1)
  this.cntr -= 1

}

incrCntr(cntrMain) {
this.cntr += 1
}

submitData(formData) {
console.log("formData ", formData);

 }
 }

Answer 1

已解决。在这里，我在卡数组中声明了一个额外的参数，并在单击按钮后将该变量递增/递减，然后将其值绑定到模板。这是代码

 <span class="add-to-cart">
              <button  mat-mini-fab color="primary" (click)="decrCntr(i)" >-</button>
              <span ngDefaultControl formControlName="foodQuantity1">{{card.counterVar}}</span>
              <button  mat-mini-fab color="secondary" (click)="incrCntr(i)" >+</button>
            </span>

和.ts文件

   decrCntr(cntrMain) {
  if (this.cardArray[cntrMain].counterVar != 1)
  this.cardArray[cntrMain].counterVar -= 1
}

incrCntr(cntrMain) {
this.cardArray[cntrMain].counterVar += 1
}

需要从组件绑定值才能查看（使用* NgFor）

1 个答案: