CODEWITHSUNDEEP
angularngfor
Furkan Öztürk
Furkan Öztürk

Reputation: 544

ngFor on array after loading

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.

Upvotes: 0

Views: 209

Answers (1)

David B.
David B.

Reputation: 749

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.

Upvotes: 1

Related Questions