GAPI 和 Angular 7 问题答案

【问题标题】：GAPI and Angular 7 issueGAPI 和 Angular 7 问题
【发布时间】：2019-09-11 05:57:28
【问题描述】：

我请求使用 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 文件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 不为空；

【问题讨论】：

您的意思是在'${folderId}' 周围加上单引号吗？
@AryanJ-NYC，不幸的是没有，问题是我发送请求，得到响应（非空），但由于data$ - 空
当您使用async pipe 时，您不需要takeUntil(this.destroy$)，因为async pipe 会为您取消订阅。
@fridoo thx 获取信息

标签： angular typescript rxjs rxjs6 rxjs-pipeable-operators

【解决方案1】：

您将getFolders() 变成了一个可观察对象，因此您必须订阅它才能开始从中获取数据。

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

【讨论】：

他正在使用负责订阅的async 管道。

【解决方案2】：

我觉得async的使用方式有问题，请试试这个：

<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>

【讨论】：

我添加了subscribe，但仍然一无所获。然后导入private cdr: ChangeDetectorRef 并在subscribe 中运行：this.cdr.detectChanges(); 在这个角度之后用数据重新渲染我的组件。所以，这是我的临时解决方法，但我不知道要修复它
ts 文件：ghostbin.com/paste/j8wu6 html 文件：ghostbin.com/paste/mujx7
我使用google api并更改了app.module ts文件：ghostbin.com/paste/usqdj他可能有问题？
您在控制台中看到任何错误吗？你怎么知道谷歌会话已经建立。能否请您在 initClient 方法中输入一个日志，看看它是否被触发。
我使用 tap(console.log) 在映射后记录响应，我得到一个包含 2 个项目的数组

【解决方案3】：

我认为问题在于，由于您的异步管道，在加载异步数据之前尝试渲染内部元素。您可以做一个简单的解决方法，为您的异步数据提供一个参考变量，并在参考变量准备就绪后呈现内部内容

<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

【讨论】：

【解决方案4】：

问题出在 gapi (google API) 中。更多信息here 我在Observable中创建了私有方法

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

【讨论】：