使用角度数据源使用API的数据填充材质表

Question

我有一个从后端发送数据的api，所以当我试图在我的angular中获取这些数据时，数据不会第一次加载，我的表保持为空，但如果例如在将数据设置在DataSource中之前打印来自banckend的数据，我的表格就会正确填充。

我的代码是：

用户数据源.ts

export class UserListDataSource extends DataSource<User> {
data: User[];
paginator: MatPaginator;
sort: MatSort;
constructor(private usersService: UsersService) {
super();
}
connect(): Observable<User[]> {
this.data = this.usersService.usersList();
//this.data.forEach(u => console.log(u.id)); <<---------- When I log this, My data is fill corectly
const dataMutations = [
observableOf(this.data),
this.paginator.page,
this.sort.sortChange
];
return merge(...dataMutations).pipe(map(() => {
return this.getPagedData(this.getSortedData([...this.data]));
}));
}
...

}

用户服务

export class UsersService {
users: User[];
constructor(private http: HttpClient) {}
usersList() {    
this.http.get(`${environment.apiUrl}/users`).pipe(
map((jsonArray: Object[]) =>  jsonArray.map(jsonItem => User.fromJson(jsonItem)))
).subscribe((users: User[]) => { this.users = users; });
return this.users;
}
}

组件

export class UserListComponent implements AfterViewInit, OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<User>;
dataSource: UserListDataSource = new UserListDataSource(this.usersService);
displayedColumns = ['id', 'email', 'username'];
constructor(private usersService: UsersService) { }
ngOnInit() {}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
}

---

我不确定我是用正确的方式填表，还是遗漏了什么。

据我所见，我认为后端加载数据的时间比前端长，换句话说，前端没有等待必要的时间从后端获取数据。

有什么办法解决这个问题吗？

---

注意：我使用角度材料原理图来创建所有这些，在默认代码中，它使用静态数据，这不是我的解决方案，我需要使用动态数据。

Answer 1

在将用户集合发回之前，您应该等待服务器响应。

用户服务

usersList(): Observable<User[]> {    
return this.http.get(`${environment.apiUrl}/users`).pipe(
map((jsonArray: Object[]) =>  jsonArray.map(jsonItem => User.fromJson(jsonItem)))
);
}

UserService只是返回用户集合的promise
在您的UserListComponent中，创建一个类型为User的MatTableDataSource，并等待来自您的服务的数据。然后，一旦完成，将该数据添加到datasource。

export class UserListComponent implements OnInit, AfterViewInit {
private users: User[] = [];
dataSource = new MatTableDataSource<User>();
columns: string[] = ['...'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private service: UsersService) {}
ngOnInit(): void {
this.service.usersList().subscribe(users => {
this.users = users;
this.dataSource.data = this.users;
});
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
}

最后一点。使用table标记中的dataSource输入将MatTableDataSource绑定到表。

<table [dataSource]="dataSource">
<!-- ... -->
</table>

Answer 2

我不太确定到底是什么问题，但我最近用有角度的材料写了几张表。这是我用来连接桌子的简单方法。

export class UserDataSource extends DataSource<any> {
constructor (
private userSettingsService: UserSettingsService) 
{
super();
}
public usersDataStream = new BehaviorSubject<IUser[]>([]);
connect(): Observable<IUser[]> {
return this.usersDataStream.asObservable();
}
disconnect() {
this.usersDataStream.complete();
}
}

然后在组件类中：

public dataSource: UserDataSource;
ngOnInit(): void {
this.dataSource = new UserDataSource(this._userSettingsService);
}

然后是HTML模板：

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