ngFor on array after loading

Question

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.

David B. · Accepted Answer · 2021-04-22 17:24:03Z

1

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.

edited Apr 22, 2021 at 17:24

answered Apr 22, 2021 at 15:22

David B.

7395 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Furkan Öztürk Over a year ago

The return value of my getShops() is actually undefined.

getShops(user: any) {     const selector = {       _id: { $in: user.Shops },     };     this.dbService.localDB       .find({         selector,       })       .then((result: any) => {         console.log('SHOPS: ', result);         return result;       });   }

Am I doing something wrong with the return?

David B. Over a year ago

Ok that's a Promise you get from the localDB. so the solution for you should be to remove the | async from the template.

Furkan Öztürk Over a year ago

"locations" (right above the constructor) stays undefined when I try to check what's in it. this.locations = await this.syncService.getShops(user); Might be doing something wrong here

David B. Over a year ago

does this line log any data? console.log('SHOPS: ', result); or do you get any error messages?

David B. Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

ngFor on array after loading

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related