Angular Material + GAPI：表格显示行，但单元格为空答案

【问题标题】：Angular Material + GAPI: table shows rows, but with empty cellsAngular Material + GAPI：表格显示行，但单元格为空
【发布时间】：2018-08-27 07:11:46
【问题描述】：

我正在集成角度材料和 Google api。我想在表格中显示 api 的响应。问题是未填充 mat-table 行的 mat-cell，但显示了该行。这是我的桌子：

    <mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="age">
      <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.age}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="city">
      <mat-header-cell *matHeaderCellDef> City </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.city}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

这是我创建的界面：

    export interface User { name: string; age: number; city: string; }

这是与表格关联的组件：

    export class UsertableComponent implements OnInit, OnChanges {
  @Input() apiReady: boolean;

  dataSource: UserDataSource;
  displayedColumns = ['name', 'age', 'city'];

  constructor(private userService: UserService) {

  }

  ngOnInit() {

  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.apiReady) {
      this.dataSource = new UserDataSource(this.userService);
    }
  }
}

export class UserDataSource extends DataSource<any> {
  constructor(private userService: UserService) {
    super();
  }

  connect(): Observable<User[]> {
    return this.userService.getUsers();
  }

  disconnect() {

  }
}

最后，噩梦来了。调用 gapi 并返回数据的服务。我可以确保 api 响应，特别是这行代码 response.result.users[0].name.fullName 对应于具有值的字符串对象。

export class UserService {
  private serviceUrl = environment.apiUrl + '/getcust/';
  private apiLoaded = false;
  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    /* // THIS WORKS!!!
        const u: User = {
          'name': 'ss',
          'city': 'città',
          'age': 3
        };
        return Observable.create(observable => {
          observable.next([u]);
          observable.complete();
        });
     */

    return Observable.create(observable => { // THIS DOESN'T WORK
      return gapi.client.directory.users.list({
        'customer': 'my_customer',
        'maxResults': 1,
        'orderBy': 'email'
      }).then(response => {

        const u: User = {
          'name': response.result.users[0].name.fullName,
          'city': 'citta',
          'age': 3
        };

        observable.next([u]);
        observable.complete();
      });
    });
  }
}

正如您在评论中看到的，注释行有效，其他行无效。

Result with empty cells

Result with populated cells, without calling GAPI

【问题讨论】：

gapi.client.directory.users.list 返回什么？承诺？
我想是的。这是 javascript 的快速入门指南：developers.google.com/admin-sdk/directory/v1/quickstart/js，这是一个显示如何使用 typescript 进行操作的问题：stackoverflow.com/questions/38091215/…
您在控制台中没有收到任何错误吗？也许在 API 调用之前尝试不使用return。
重点是当observable完成时，行出现在表格中，但单元格没有被填充。但是我放在 next() 方法中的对象是正确的。我也尝试了与示例完全相同的对象，但单元格仍然是空的： const u: User = { 'name': 'ss', 'city': 'città', 'age': 3 } ;
已经试过了，没用。

标签： angular typescript angular-material google-api-js-client

【解决方案1】：

解决办法是：

导入这个：

import {ChangeDetectorRef} from '@angular/core';

组件的构造函数：

constructor(private cd: ChangeDetectorRef) {
  }

在ngInit中初始化数据源：

    ngOnInit() {
    this.dataSource = new UserDataSource();
}

使用BehaviorSubject（和方法asObservable）随时改变数据源的内容，但是当表中的数据改变时不要忘记调用：

this.cd.detectChanges();

更新单元格内容

【讨论】：