如何在 *ngFor 中获取所有选中的复选框？答案

【问题标题】：How to get all checked checkboxes in *ngFor?如何在 *ngFor 中获取所有选中的复选框？
【发布时间】：2020-09-10 15:46:20
【问题描述】：

我有一些从 API 获取的对象数组生成的复选框，每个复选框都是可以切换的盘子成分，当用户完成自定义盘子时，他应该能够提交盘子及其成分。

所以我有一个像这样的 *ngFor 来渲染盘子的成分：

          <div
            class="col-sm-6 affiancato"
            *ngFor="let ingrediente of ingredientiPlu"
          >
            <div class="form-check">
              <label class="custom-constrol">
                <input
                  class="form-check-input"
                  checked="true"
                  type="checkbox"
                  [value]="ingrediente"
                  (change)="checkVariante(ingrediente, $event)"
                />
                {{ ingrediente.desc }}
              </label>
            </div>
          </div>

虽然成分是以下类：

export class Varianti {
    constructor(
        public id?: string,
        public desc?: string,
        public prezzo?: number,
        public prezzo_meno?: number,
        public menu?: number[],
        public stato?: string,
        public ingrediente?: boolean
    ){}
}

variante.ingrediente 是对象的一个属性，我通过它过滤两个子数组中的对象：

   varianti.filter((variante: Varianti) => {
      variante.ingrediente
        ? this.ingredientiPlu.push(variante)
        : this.variantiPlu.push(variante);
    });

如何在单击按钮时获取所有选中的复选框 Varianti 对象？

【问题讨论】：

标签： angular

【解决方案1】：

在您的更改功能中，您可以执行以下操作：

checkVariante(): void {
   /** other code */

   /** on change filter all true ingrediente to a component variable allChecked */
   this.allChecked = this.ingredientiPlu.filter(i => i.ingrediente);
}

【讨论】：

其实ingrediente: boolean并不是说对象是否被选中的字段，而是对象的一个属性。
那么控制它的是什么？我很困惑，因为在您的问题结束时，您声明您想要获取所有 Checked 框，它们对应于关联的 Varianti 对象。如果是这种情况，您应该使用 [ngModel] 将成分的值绑定到复选框
实际上我无法向 Varianti 添加另一个参数，该参数将管理是否检查了对象，因为我必须按原样将对象重新发送到服务器。所以我看起来像一个循环或 idk 什么会循环通过复选框并从选中的对象中获取对象值
哪个值设置复选框的初始状态？
默认情况下未设置选中，因此未选中复选框，而另一种类型的复选框已选中，默认情况下在 html 中设置为 true

【解决方案2】：

通过创建Varianti 的数组来解决，我将(change) 上的对象推送或删除到该数组，如下所示：

      <div
        class="col-sm-6 affiancato"
        *ngFor="let variante of variantiPlu"
      >
            <input
              class="form-check-input"
              type="checkbox"
              (change)="checkVariante(variante, $event)"
            />
            {{
              variante.desc 
            }}
      </div>

  checkVariante(oVariante: Varianti, event: any): void {
    const variante = Object.assign({}, oVariante); // cloning Varianti object to don't affect the original one.
    if (event.target.checked) { // checking if the checkbox has been checked
        variante.prezzo = variante.ingrediente ? 0 : variante.prezzo; // changing object properties
        variante.stato = variante.ingrediente ? 'SENZA' : 'PIU';
        this.checkedVariants.push(variante); // pushing object to Varianti[]
    }else {
      this.checkedVariants = this.checkedVariants.filter(v => v.id !== variante.id); // if the checkbox has been unchecked removing the object from the array
    }
    console.log(this.checkedVariants);
  }

【讨论】：