0

gapi を使用して Google ドライブへのリクエストがあります。

getFolders(folderId: string): Observable<{ id: string, name: string }[]> {
    const promise = gapi.client.drive.files.list({
      fields: 'incompleteSearch,nextPageToken,files(id,name)',
      q: `'${folderId}' in parents`,
    }).then((res) => {
      return JSON.parse(res.result.files);
    });
    return from(promise);
  }

次に、このデータを component: .ts ファイルに表示しようとしますngOnInit:

this.data$ = this.googleDriveService.getFolders(rootFolderId)
        .pipe(
          map((files) => {
            debugger;
            return files.map(file => ({ id: file.id, header: file.name, content: '', imageUrl: this.defaultImageUrl }));
          }),
          takeUntil(this.destroy$),
        );

およびhtmlファイル：

  <mat-grid-tile *ngFor="let elem of (data$ | async)">
    <app-card (input)="returnCartItem(elem)" (click)="goto(elem.header, elem.id)"></app-card>
  </mat-grid-tile>

問題は、data$常に空であることです。そこに何か問題があるかどうかを確認するために追加debuggerしましたが、機能しません。応答から、2 つのファイルを取得するため、空ではありません。mapmapres.result.files

4

4 に答える 4

0

問題は、非同期パイプが原因で、非同期データがロードされる前に内部要素がレンダリングされようとしていることだと思います。簡単な回避策を実行して、非同期データに参照変数を与え、参照変数の準備が整ったら内部コンテンツをレンダリングできます。

<ng-container *ngIf="data$ | async as data">
    <mat-grid-tile *ngFor="let elem of data | async">  //note it is not data$
        <app-card (input)="returnCartItem(elem)" (click)="goto(elem.header, elem.id)"> 
        </app-card>
    </mat-grid-tile>
</ng-container
于 2019-04-23T18:20:52.663 に答える
0

I think there is a problem the way async is used, please try this:

<mat-grid-tile *ngFor="let elem of data$ | async">
    <app-card (input)="returnCartItem(elem)" (click)="goto(elem.header, elem.id)"></app-card>
</mat-grid-tile>
于 2019-04-22T07:41:45.807 に答える