Angular Material + GAPI:table 显示行,但单元格为空
Angular Material + GAPI: table shows rows, but with empty cells
我正在整合 angular material 和 Google api。我想在 table 中显示 api 的响应。问题是 mat-table 行的 mat-cell 未填充,但显示了该行。这是我的 table:
<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; }
这是与 table 关联的组件:
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 和 return 数据的服务。我可以确保 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
解决方法是:
导入这个:
import {ChangeDetectorRef} from '@angular/core';
组件的构造函数:
constructor(private cd: ChangeDetectorRef) {
}
在ngInit中初始化数据源:
ngOnInit() {
this.dataSource = new UserDataSource();
}
使用BehaviorSubject(以及方法asObservable)可以随时改变数据源的内容,但是当数据改变的时候table别忘了打电话:
this.cd.detectChanges();
更新单元格内容
我正在整合 angular material 和 Google api。我想在 table 中显示 api 的响应。问题是 mat-table 行的 mat-cell 未填充,但显示了该行。这是我的 table:
<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; }
这是与 table 关联的组件:
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 和 return 数据的服务。我可以确保 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
解决方法是:
导入这个:
import {ChangeDetectorRef} from '@angular/core';
组件的构造函数:
constructor(private cd: ChangeDetectorRef) {
}
在ngInit中初始化数据源:
ngOnInit() {
this.dataSource = new UserDataSource();
}
使用BehaviorSubject(以及方法asObservable)可以随时改变数据源的内容,但是当数据改变的时候table别忘了打电话:
this.cd.detectChanges();
更新单元格内容