GAPI и Angular 7 выпуск - PullRequest
Новая
       36

GAPI и Angular 7 выпуск

0 голосов
/ 22 апреля 2019

У меня есть запрос на Google Drive с помощью gapi: 

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);
  }

тогда я пытаюсь показать эти данные в компоненте: .ts file 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 к map, чтобы проверить, может быть, там что-то не так, но в функции map это никогда не срабатывает. Из ответа я получаю 2 файла, поэтому res.result.files не пусто;

Ответы [ 4 ]

1 голос
/ 06 мая 2019

Проблема была в гапи (Google API).Больше информации здесь Я создал приватный метод inObservable 

private inObservable(promise) {
    return from(
      new Promise((resolve, reject) => {
        this.zone.run(() => {
          promise.then(resolve, reject);
        });
      })
    );
  }

и заключил в него свой запрос 

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 inObservable(promise);
0 голосов
/ 22 апреля 2019

Я думаю, что проблема с использованием асинхронного соединения, попробуйте следующее: 

<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>
0 голосов
/ 23 апреля 2019

Я думаю, что проблема в том, что из-за вашего асинхронного канала внутренние элементы пытаются визуализироваться до загрузки асинхронных данных.Вы можете сделать простой обходной путь, чтобы дать вашим асинхронным данным ссылочную переменную и визуализировать внутреннее содержимое, как только ссылочная переменная будет готова как 

<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
0 голосов
/ 22 апреля 2019

Вы превратили getFolders() в наблюдаемое, поэтому вы должны подписаться на него, чтобы начать получать от него данные. 

this.googleDriveService.getFolders(rootFolderId).pipe(...).subscribe();
...