[Fixed] ngFor on array after loading

Issue

I’m trying to make a cards list after an array is loaded. See my code below.

 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();
    // Get 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)"
                  >Meer info</ion-button
                >
              </ion-row>
            </ion-grid>
          </ion-item>
        </ion-card>

But it doesn’t work. What am I doing wrong?
I’ve already used async in my ngFor directive, but that didn’t solve it for me.

Solution

You may have confused observables and Promises. What type does your getShops() method return?

If it returns an Observable<Location[]> then you don’t need the await as an await would wait for a Promise to resolve.

If it returns a Promise<Location[]> then you need the await but not the async pipe in your ngFor. The | async actually subscribes to an observable.

EDIT:
The actual solution is in the discussion/chat below.