angular - Angular中的复选框和增量减量

Question

我有 2 个复选框，选中后，它会为该复选框启用“增加/减少”数量按钮。

问题是每当我增加或减少数量时，它都适用于两个复选框。无论哪个复选框被打勾或没有票。请问有人能告诉我哪里错了吗？

以下是我的 TS 代码

quantityInput() {
  this.selectLicences.filter((value, index) => {
    if (typeof value.quantity === 'string') {
      const regexp = new RegExp('^[a-zA-Z]*$')
      const specialReg = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/
      if (regexp.test(value.quantity)) {
        value.quantity = 1
      } else if (specialReg.test(value.quantity)) {
        value.quantity = 1
      } else {
        value.quantity = parseInt(value.quantity)
      }
      console.log(value.name+value.quantity)
    }
    if (isNullOrUndefined(value.quantity)) {
      value.quantity = 1
    }
    if (value.quantity.toString() === '') {
      value.quantity = 1
    }
    if (value.quantity > 10) {
      value.quantity = 10
    }
    if (value.quantity < 1) {
      value.quantity = 1
    }
    console.log(value.name+value.quantity)
  });
  }
  
 quantityChanged(action) {
  this.selectLicences.filter((value, index) => {
    if (typeof value.quantity === 'string')
      value.quantity= parseInt(value.quantity)
    switch (action) {
      case 'add': {
        value.quantity >= 10
          ? (value.quantity= 10)
          : (value.quantity = value.quantity + 1)
          console.log(value.name+value.quantity)
        break
      }
      case 'sub': {
        value.quantity <= 1
          ? (value.quantity = 1)
          : (value.quantity = value.quantity - 1)
          console.log(value.name+value.quantity)
        break
      }
      default: {
        return
      }
    }
  });
  }

以下是我的html代码

<div *ngFor="let licence of selectLicences; let i = index" class="pt2" fxLayout="row wrap" fxLayoutAlign="start" fxLayoutGap="16px grid">
    <span fxFlex="25" class="align-right mt4" >
        <mat-checkbox
        name="selectLicences"
        (change)="changeSelection()"
        [(ngModel)]="licence.isChecked"
        color="primary"
        >
        </mat-checkbox>
    </span>
    <span fxFlex="15" class="align-left">
            <strong><h3>{{licence.name}}</h3></strong>
    </span>  
<div class="pt2" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="16px grid">
    <span class="mt3">
      <button
        color="primary"
        (click)="quantityChanged('sub')"
        mat-flat-button
        [disabled]="licence.quantity == 1"
      >
        <mat-icon svgIcon="Action_Minimize"> </mat-icon>
      </button>
    </span>
    <span fxFlex="35" class="mt3">
        <mat-form-field appearance="outline">
            <input
              min="1"
              max="10"
              name="selectLicences"
              matInput
              [disabled]="!licence.isChecked"
              (change)="quantityInput()"
              [(ngModel)]="licence.quantity"
              type="text"
            />
        <mat-error *ngIf="licence.quantity" > 10">
          Quantity cannot be greater than 10
        </mat-error>
        <mat-error *ngIf="licence.quantity < 1">
          Quantity cannot be lesser than 1
        </mat-error>
      </mat-form-field>
    </span>
    <span class="mt3">
      <button 
      (click)="quantityChanged('add')"
       color="primary" [disabled]="!licence.isChecked" mat-flat-button>
        <mat-icon svgIcon="Action_Add"> </mat-icon>
      </button>
    </span>
</div>
</div>

标签： angular