在 Firestore 中的 Mat 幻灯片切换真/假更新

Question

我正在尝试将 Firestore 文档的布尔字段从true 更新为false 或从false 更新为true，视情况而定。

当我激活和停用按钮时，它似乎工作正常，但在某些情况下它停止工作，我必须再次按下按钮。

这里是我的堆栈闪电战：https://stackblitz.com/edit/angular-ea3wme

myComponent.html

<mat-slide-toggle #toggle [checked]="domiciliario.estado" (change)="actualizarEstado(domiciliario.id)"></mat-slide-toggle>

myComponent.ts

actualizarEstado(key){
this.fs.updateEstado(key);
}

myService.ts

estadoChange: boolean = !false || !true;

updateEstado(key){
this.afs.doc('domiciliarios/' + key).update({
  estado : this.estadoChange = !this.estadoChange
})
}

Answer 1

原因是您的服务的estadoChange 不会与您编辑的domiciliario 项目保持同步。如果您希望domiciliarios 的所有项目保持estado 的独立状态，则需要将它们中的每一个更新为它们自己的确切对应状态，这意味着您应该利用mat-slide-toggle 的值。

您可以尝试使用ngModel 和ngModelChange。

<mat-slide-toggle #toggle [ngModel]="domiciliario.estado" (ngModelChange)="actualizarEstado(domiciliario.id, $event)"></mat-slide-toggle>

// component function
actualizarEstado(key, obj, e){
  this.fs.updateEstado(key, e);
}

// service function
updateEstado(key, estado){
  this.afs.doc('domiciliarios/' + key).update({estado});
}

参考固定demo。

---

其他信息： 每次更改项目都会导致firebase的值发生变化，并导致重新渲染所有ngFor项目，您应该考虑使用trackBy来防止重新渲染它的相同项目，另见docs和 solution for ngFor performance question。