In one component, I have set up a functionality to subscribe to an HTTP GET request from a service and store the response in a variable. The service contains a Subject as an observable so that it can be subscribed to in another component. However, while I am able to successfully retrieve and log the object's correct value in the new component, I encounter an issue where I am unable to display it in HTML using interpolation.
Here is the service setup:
private transactionsToSend = new Subject<any>();
currentTransactions = this.transactionsToSend.asObservable();
transactions() {
return this.http.get<any>(`${this._url}/transactions`)
}
sendTransactions(transaction: Transactions){
this.transactionsToSend.next(transaction)
}
Subscription and transmission in the receiving component:
this.transactionsService.transactions().subscribe(
(res: Transactions) => {
this.transactions = res;
this.transactionsService.sendTransactions(this.transactions);
})
The process of retrieving data in another component:
getReceives() {
this.transactionService.currentTransactions.subscribe(
(res: any) => {
this.valueReceita = 0;
this.currentTransactions = res.transactions;
for (let x = 0; x < res.transactions.length; x++) {
if (this.currentTransactions[x].chart == "+") {
this.valueReceita += parseFloat(this.currentTransactions[x].value)
}
}
console.log(this.valueReceita) // This value is 99999
})
}
However, when attempting to display the received data:
<p>{{valueReceita | currency:'BRL'}}</p>
The value does not appear until another request is made.