Issue
In my application I can retrieve the data successfully from the backend and show it on the frontend. But sometimes when I navigate from other pages, I do see the data. Sometimes I don't. I have to refresh the page to see the data.
This is a part I want to populate:
<div class="col-md-3">
<mat-form-field>
<mat-label>Client WhatsApp Number</mat-label>
<mat-select [(ngModel)]="clientWhatsAppNumber"
(ngModelChange)="searchWhatsAppSendReceiveMessages()">
<mat-option [value]="" (click)="goToFirstPage()">All</mat-option>
<ng-container *ngIf="isAdmin(); else isNotAdmin">
<mat-option *ngFor="let whatsAppClientNumber of filteredWhatsAppNumbers"
[value]="whatsAppClientNumber" (click)="goToFirstPage()">
{{ whatsAppClientNumber }}
</mat-option>
</ng-container>
<ng-template #isNotAdmin>
<mat-option *ngFor="let whatsAppChildClientNumber of whatsAppChildClientNumbers"
[value]="whatsAppChildClientNumber" (click)="goToFirstPage()">
{{ whatsAppChildClientNumber }}
</mat-option>
</ng-template>
</mat-select>
</mat-form-field>
</div>
'filteredWhatsAppNumbers' is populated every time. The problem is populating 'whatsAppChildClientNumbers'.
This is where I retrieve and filter the numbers:
constructor(
private whatsAppSendReceiveMessagesService: WhatsAppSendReceiveMessagesService,
private whatsAppClientNumberService: WhatsAppClientNumberService,
private whatsAppNumberService: WhatsAppNumberService,
private clientService: ClientService,
private helperService: HelperService,
private systemUserService: SystemUserService,
private reportService: ReportService) {
this.whatsAppSendReceiveMessages = [];
this.whatsAppSendReceiveMessage = new WhatsAppSendReceiveMessages;
this.pageSize = 5;
this.currentPage = 0;
const currentDate = new Date();
for (let i = 0; i < 12; i++) {
this.availableMonthYears.push(new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1));
}
this.selectedMonthYear = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
this.getAllClientWhatsAppNumbers();
}
ngOnInit(): void {
this.loadSystemData();
this.onMonthYearSelected();
}
loadSystemData() {
this.currentUserSubscription = this.systemUserService.getCurrentLoginUser().subscribe(resp => {
this.currentUser = resp;
console.log("Logged in: ", resp.role)
if (this.currentUser != null) {
if (this.currentUser.role === 'Sysadmin') {
this.getAllClients();
} else {
this.getCurrentClient();
}
this.getAllChildClientWhatsAppNumbers();
this.getAllParentClientNumbers();
this.searchWhatsAppSendReceiveMessages();
}
});
}
isAdmin() {
return this.currentUser?.role === 'Sysadmin';
}
getAllClients(): void {
this.clientService.getAllClients().subscribe(
response => {
if (response) {
this.clients = response;
console.log("Clients: ", this.clients)
}
}, error => this.helperService.showNotification('top', 'right', 'danger', error.error ? error.error : "Something went wrong")
);
}
getCurrentClient() {
this.clientSubscription = this.clientService.getForCurrentLoginUser().subscribe(client => {
this.client = client;
this.clientRef = client.clientRef;
this.getChildClients();
this.clientSubscription.unsubscribe();
})
}
getChildClients() {
this.clientService.getChildClients(this.clientRef, this.currentPage, this.pageSize, this.searchString)
.subscribe(responsePage => {
this.clients = responsePage?.content;
});
}
getAllClientWhatsAppNumbers() {
this.getWhatsAppClientNumberSubscription = this.whatsAppClientNumberService.getAllWhatsAppClientNumbers().subscribe(resp => {
this.whatsAppClientNumbers = resp;
this.updateFilteredWhatsAppNumbers();
this.getWhatsAppClientNumberSubscription.unsubscribe();
})
}
updateFilteredWhatsAppNumbers() {
const matchedClient = this.clients?.find(obj => obj.parentClient !== null && obj.clientRef === this.clientName);
if (this.clientName && matchedClient) {
this.filteredWhatsAppNumbers = this.whatsAppClientNumbers
.filter(clientWhatsAppNumber => clientWhatsAppNumber.clientConfig?.clientRef === matchedClient?.parentClient?.clientRef)
.map(clientWhatsAppNumber => clientWhatsAppNumber.whatsAppNumber?.number);
} else if (this.clientName) {
this.filteredWhatsAppNumbers = this.whatsAppClientNumbers
.filter(clientWhatsAppNumber => clientWhatsAppNumber.clientConfig?.clientRef === this.clientName)
.map(clientWhatsAppNumber => clientWhatsAppNumber.whatsAppNumber?.number);
} else if (this.clientName === '' || this.clientName === 'ALL' || !this.clientName) {
this.filteredWhatsAppNumbers = this.whatsAppClientNumbers
.map(clientWhatsAppNumber => clientWhatsAppNumber.whatsAppNumber?.number);
}
}
getAllChildClientWhatsAppNumbers() {
this.whatsAppChildClientNumbers = [];
this.whatsAppClientNumbers.forEach(whatsappClientNumber => {
if (whatsappClientNumber.clientConfig.clientRef === this.currentUser?.client?.clientRef) {
this.whatsAppChildClientNumbers.push(whatsappClientNumber.whatsAppNumber.number);
}
})
}
I have tried calling the 'getAllClientWhatsAppNumbers()' ngOnInit but I was getting errors. I expected that every time I navigate to the page. The 'mat-option' is populated.
Solution
It's a race condition.
This function, getAllChildClientWhatsAppNumbers
(synchronous) is executing before whatsAppClientNumbers
is properly hydrated.
Without refactoring a bunch of code, the simplest "fix" is to move getAllChildClientWhatsAppNumbers()
after this line this.whatsAppClientNumbers = resp;
like this:
getAllClientWhatsAppNumbers() {
this.getWhatsAppClientNumberSubscription = this.whatsAppClientNumberService.getAllWhatsAppClientNumbers().subscribe(resp => {
this.whatsAppClientNumbers = resp;
this.getAllChildClientWhatsAppNumbers()
this.updateFilteredWhatsAppNumbers();
this.getWhatsAppClientNumberSubscription.unsubscribe();
})
}
and to move this to ngOnInit
getAllClientWhatsAppNumbers
Answered By - nsquires
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.