When a submit button is clicked inside the component HTML, it triggers a function called addCollaborators(). The code for this function can be found below:
component.ts
emails: string[] = [];
constructor(public userService: UserService) {}
// Function triggered by the HTML
addCollaborators() {
this.emails.forEach(email => {
const user = this.getUserFromEmail(email);
if (user instanceof User) {
this.counterService.someDbFunction();
}
});
this.dialogRef.close();
}
getUserFromEmail(emailAddress: string): User | void {
console.log("Code reaches here");
this.userService.users$.subscribe((users: User[]) => {
console.log("This part is never executed");
for (const user of users) {
if ( /* Some boolean logic */ ) {
return user;
}
}
});
}
user.service.ts
users$: Observable<User[]>;
The log statements indicate that the code within the subscription inside getUserFromEmail is not being run. This can be seen as the operations are not performed and there is no message in the console. The users$ observable is successfully filled within the service constructor and subscribed to elsewhere. For example, the following line in the constructor of component.ts works:
this.userService.users$.subscribe(users => console.log(users));
If you need any more information or have suggestions, please let me know. Thank you!
Update
The code snippet below will not produce any logging, hinting at a deeper problem than initially anticipated.
addCollaborators() {
console.log("I am logged");
this.userService.users$.subscribe(users => console.log("I am not", users));
}
Here is the relevant HTML:
<button mat-fab
(click)="addCollaborators()"
class="add-collaborators">
<mat-icon>group_add</mat-icon>
</button>