I am trying to display a list of cards that will update dynamically as the data in another service is updated. Each card should have a tool tip that displays the item's name when the user hovers over it.
Originally my code was as follows:
<div class="bankItemsContainer" fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
<div class="bankItem" *ngFor="let item of GetBankItems()">
<mat-card class="card-picture" matTooltip="{{item.name}}">
<mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
<mat-icon svgIcon="{{item.icon}}"></mat-icon>
</mat-card-title>
<mat-card-footer style="text-align: center;">{{ item.quantity }}</mat-card-footer>
</mat-card>
</div>
</div>
The issue is that the tooltip was not being shown when I hovered over the card.
After some research I was able to find out that calling a function doesn't work well with ngFor and thus causes issues for the matTooltip since the items are constantly being re rendered.
I then changed the ngFor to use the property from the service that need to access:
*ngFor="let item as playerService.playerSave.bank.items"
This did not fix it. I read that using an observable should help so I set up an observable around the value from the service.
ngOnInit(): void {
this.bankItems$ = of(this.playerService.playerSave.bank.items);
}
And changed the ngFor to:
*ngFor="let item of bankItems$ | async; let i=index"
Again the tooltip still doesn't show when I mouse over the card.
I feel like I have run out of things to try and I am not sure how to ultimately make this work.
