Question

我有这个旋转木马。旋转木马中的每个项目上方都有一个复选框。我希望能够点击项目，复选框将获得一个选中的属性。代码执行此操作。我唯一的问题是它切换了旋转木马中的所有复选框。我只想让它切换一下点击。

      <tshq-carousel [dataSource]="brands" [selections]="selectedBrands"  (select)="onItemsSelected($event)" [changeKey]="changeKey" [pageSize]="5" [circular]="false"
    [enableSelection]="true"  mode="single">
    <ng-template let-brand>
      <ng-container [ngSwitch]="brand.icon&&brand.icon.length>0">
        <ng-container *ngSwitchCase="true" >
          <label class="apply carousel-checkbox">
          <input  type="checkbox" id="brandCheck" [checked]="isChecked" value="no" name = "brand">
          </label>
          <img [src]="formatLogo(brand.icon)" style="max-width:150px" (click)="isChecked = !isChecked" />
        </ng-container>
      </ng-container>
    </ng-template>

  </tshq-carousel>

Answer 1

您使用isChecked变量绑定到轮播的所有输入复选框，因此当您更改值（选中或取消选中）1输入复选框时，它也会设置为全部保留的。

我建议你为模型brand添加1个属性，并用它来绑定输入复选框或图像。例如：

<tshq-carousel [dataSource]="brands" [selections]="selectedBrands"  (select)="onItemsSelected($event)" [changeKey]="changeKey" [pageSize]="5" [circular]="false"
    [enableSelection]="true"  mode="single">
    <ng-template let-brand>
      <ng-container [ngSwitch]="brand.icon && brand.icon.length>0">
        <ng-container *ngSwitchCase="true" >
          <label class="apply carousel-checkbox">
          <input  type="checkbox" id="brandCheck" [checked]="brand.isChecked" value="no" name="brand">
          </label>
          <img [src]="formatLogo(brand.icon)" style="max-width:150px" (click)="brand.isChecked = !brand.isChecked" />
        </ng-container>
      </ng-container>
    </ng-template>

  </tshq-carousel>

在Angular 2 / Typescript中的轮播中的项目数组上切换checkbox属性

1 个答案: