Угловой материал + GAPI: таблица показывает строки, но с пустыми ячейками

Я интегрирую угловой материал и Google API. Я хочу показать в таблице ответ API. Проблема заключается в том, что ячейка mat строк таблицы mat не заполнена, а отображается строка. Это мой стол:

    <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() {

  }
}

И вот, наконец, кошмар. Служба, которая вызывает гэппи и возвращает данные. Я могу гарантировать, что ответ 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();
      });
    });
  }
}

Как вы видите в комментарии, закомментированные строки работают, остальные нет.

Результат с пустыми ячейками

Результат с населенными клетками, без вызова GAPI

1 ответ

Решение

Решение:

Импортируйте это:

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

Конструктор компонента:

constructor(private cd: ChangeDetectorRef) {
  }

В ngInit инициализируйте источник данных:

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

Используйте BehaviorSubject (и метод asObservable), чтобы в любое время изменить содержимое источника данных, но когда данные изменяются в таблице, не забудьте вызвать:

this.cd.detectChanges ();

обновить содержимое ячеек

Другие вопросы по тегам