加载后阵列上的 ngFor

Question

我正在尝试在加载数组后制作卡片列表。请参阅下面的代码。

 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>

但是没用。我究竟做错了什么？我已经在我的 ngFor 指令中使用了异步，但这并没有为我解决问题。

Answer 1

您可能混淆了 Observable 和 Promises。你的 getShops() 方法 return 是什么类型？

如果它 return 是 Observable<Location[]> 那么你不需要 await 因为 await 会等待 Promise 解决。

如果 return 是 Promise<Location[]>，那么您需要 await 而不是 ngFor 中的 async 管道。 | async 实际上订阅了一个 observable。

编辑： 实际的解决方案在下面的discussion/chat中。

加载后阵列上的 ngFor

ngFor on array after loading

angular

ngfor