Question

我正在尝试根据具体情况将Firestore文档的布尔字段从true更新为false或从false更新为true。

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

这里是我的stackblitz：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的独立状态，则需要使用自己的完全对应状态更新每个项目，这意味着您应该利用{{1}的值}。

您可以尝试使用mat-slide-toggle和ngModel。

ngModelChange

参考修正 demo 。

其他信息： 每次更改项目都会导致firebase的值发生变化，并重新引导所有ngFor项目时，您应该考虑使用<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}); }来防止重新呈现相同的项目，另请参阅 docs < / strong>和 solution for ngFor performance question 。

Mat滑动切换Firestore中的true / false更新

1 个答案: