mat-checkbox 在更新 firestore / reload 页面后继续选择

Question

我正在使用 mat-checkbox 和 ngFor 从 Firestore 迭代一个数组

默认情况下，每个mat-checkbox 的值都被禁用，即false。我想要的是，当检查一个或多个框并更新页面时，这些框必须保留标记，即，true。有可能吗？

发生的情况是，我正在对每个 mat-checkbox 进行总和，并且我希望页面中的任何更改都不会影响该总和。

我在 Firestore 中的数组如下所示：

paquetes: {
  paqueteId1: {
    ...
    extras: [
      {nombre: 'nombre1', isChecked: false, costo: 10},
      {nombre: 'nombre2', isChecked: false, costo: 20},
      {nombre: 'nombre3', isChecked: false, costo: 30}
    ]
  }
  ...
}

component.html

<mat-checkbox *ngFor="let extra of paquete.extras" class="nmb" [(ngModel)]="extra.isChecked">
  {{ extra.costo}}
</mat-checkbox>

<span>{{total}}</span>

component.ts

get total() {
  return this.paquete.extras.filter(x => x.isChecked).reduce((a, b) => a + b.costo + 0, 0) * this.numeroPersonas + this.subtotal;
}

this.fs.getPaquete(this.idPaquete).subscribe( res => {
   this.paquete = res.data();
  }
);

Answer 1

您必须在 getPaquete 函数的 subscription 内将响应数据分配给 paquete 之前执行一些操作以保持检查价值，因为它是。请按以下步骤操作。

this.fs.getPaquete(this.idPaquete)
  .subscribe( (res: any) => {

    const paquete = res.data();
    const selected = this.paquete.extras.filter(x => x.isChecked);

    selected.forEach(y => {

      const found = paquete.extras.find(z => z.nombre === y.nombre);
      const index = paquete.extras.indexOf(found);

      if (index > -1) {
        paquete.extras[index].isChecked = true;
      }
    });
    this.paquete = paquete;
}

希望对您有所帮助。接受任何查询。