'Why doesn't my Angular combineLatest operate the first time you make a change on a page?
I have the following combineLatest:
validateAttendanceDateAndDuplicates$ = combineLatest([this.controls.attendanceDate.valueChanges, this.controls.type.valueChanges, this.$spService.clientAttendance$, this.$spService.clientProfile$]).pipe(
tap(([attendanceDate, type, attendances, client]) => {
console.log("in valid type top")
const typeValueChanges$ =
this.controls.type.valueChanges.pipe(
mergeMap(() => {
console.log("in valid type")
return this.$spService.clientAttendance$;
}),
tap((attendances) => {
this.validateTypeAndDate(client, attendances);
}
))
console.log("in valid attend top")
const attendanceDateValueChanges$ =
this.controls.attendanceDate.valueChanges.pipe(
mergeMap(() => {
console.log("in valid attend")
return this.$spService.clientProfile$;
}),
tap(client => {
this.validateTypeAndDate(client, attendances);
}
))
merge(typeValueChanges$, attendanceDateValueChanges$).subscribe();
}))
The top pipe operation is for a type dropdown and the second is for a date picker. Here is the pattern: the first time you open a new tab in Chrome, when you pick a type, based on the console.log statements, I can see that neither the tap nor the mergeMap is entered. When you then pick a date, I can see that tap is entered, but not the mergeMap. After that, if you pick either a type or date, all works as expected. Also, the pattern is the same if you first pick a date in a new tab.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
