I'm currently experiencing an issue with my Angular setup and I am struggling to identify what the exact problem is. To provide some context before diving into the problem itself:
Within a class called data-service.ts, there exists a method named "getData". Here is the implementation of this method:
getData(): Observable<Data[]> {
let params = new HttpParams();
params = params.append('user_id', this.userId);
return this.http.get<Data[]>('api/data', {
observe: 'body',
responseType: 'json',
params
}).pipe(
map((response: any[]) => {
return response.map((s) => ({
id: s.id,
userId: s.user_id,
type: s.type_id,
...
}));
})
);}
My goal is to retrieve this data and update the view every time a user accesses a specific tab within ngModal. The modal component "modal-component.ts" fetches this data upon clicking the targeted tab, triggering an event using the following code:
getData(evt) {
this.data$ = this.dataSevice.getData();
}
I am passing the "data$" observable to a child component using an async pipe:
<modal-component>
...
<app-data-manager [data]="data$ | async"></app-data-manager>
...
</modal-component>
Within the "data-manager", I am utilizing *ngFor on [data], and for each data entry, I am rendering some HTML content. In that HTML, I use *ngIf to determine which template (either first or second) should be rendered.
<div *ngIf="isTrue(dataEntry); then first else second"></div>
The issue at hand: The isTrue method is being invoked multiple times for each dataEntry in the dataset, resulting in numerous calls. I have tried using promises, Take(1) pipe, assigning boolean values during mapping, subscribing to the data, and passing a regular collection instead of leveraging the async pipe. However, I am unable to pinpoint the root cause of this behavior - any assistance would be greatly appreciated. Thank you!
Additional information: When I replace isTrue(dataEntry) with dataEntry.isTrue in *ngIf, the same results persist. I also implemented "OnChanges" in the child component with a console log, where it logs once on the first click and twice on the subsequent clicks, displaying repeated messages.