Обновление слайдов матов true / false в Firestore - PullRequest
Новая
       9

Обновление слайдов матов true / false в Firestore

0 голосов
/ 30 апреля 2018

Я пытаюсь обновить логическое поле документа 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
})
}

1 Ответ

0 голосов
/ 30 апреля 2018

Причина в том, что 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});
}

см. Исправлено демо .

Дополнительная информация: Каждый раз, когда вы изменяете элемент, это приводит к изменению значения базы данных и повторной визуализации всех элементов ngFor, вы должны рассмотреть возможность использования trackBy для предотвращения повторной визуализации тех же элементов, см. Также docs и решение для ng для вопроса производительности .

...