Currently, I am attempting to generate a list of cards after loading an array. Take a look at my code snippet:
locations;
constructor(
private toolbarTitle: ToolbarTitleService,
public popoverController: PopoverController,
private syncService: SyncServiceService,
private userService: UserService
) {}
async ngOnInit() {
this.toolbarTitle.setToolbarTitle('Locaties');
const user = await this.userService.getUser();
// Retrieve all the shops
this.locations = await this.syncService.getShops(user);
}
html
<ion-card
*ngFor="let location of locations | async"
class="locatieCard"
>
<ion-item>
<img class="locatieImg" src="assets/spar_img.jpg" slot="start" />
<ion-grid>
<ion-row>
<ion-card-subtitle>{{ location.Name }}</ion-card-subtitle>
</ion-row>
<ion-row>
<ion-button
size="small"
fill="clear"
(click)="presentPopover($event)"
>More info</ion-button
>
</ion-row>
</ion-grid>
</ion-item>
</ion-card>
However, this implementation seems to be malfunctioning. Can anyone spot what mistake I might be making? I have already integrated async in my ngFor directive without success.