Eu tenho uma api que envia dados do backend, então quando tento pegar esses dados no meu angular os dados não são carregados na primeira vez, e minha tabela fica vazia, mas se por exemplo imprimir os dados que vêm do banckend antes de configurar no meu DataSource, minha tabela está preenchida corretamente.
Meu código é:
user-datasource.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]));
}));
}
...
}
userService
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;
}
}
componente
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;
}
}
Não tenho certeza se uso a maneira correta de preencher minha mesa ou estou perdendo alguma coisa.
Pelo que vejo, acho que o backend demorou muito mais do que o frontend para carregar os dados, em outras palavras, o frontend não está esperando o tempo necessário para obter os dados do backend.
Existe alguma maneira de consertar isso, por favor?
Nota: Eu uso esquemáticos de material angular para criar tudo isso, no código padrão, ele usa um dado estático, que não é a solução para mim, que eu preciso para usar dados dinâmicos.
Você deve aguardar a resposta do servidor antes de enviar as coleções dos usuários de volta.
UsersService
usersList(): Observable<User[]> {
return this.http.get(`${environment.apiUrl}/users`).pipe(
map((jsonArray: Object[]) => jsonArray.map(jsonItem => User.fromJson(jsonItem)))
);
}
UserService apenas retorna a promessa da coleção do usuário.
No seu UserListComponent, crie um MatTableDataSourcedo tipo Usere aguarde os dados do seu serviço. Então, uma vez preenchido, adicione esses dados ao 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;
}
}
E, o último ponto. Use a dataSourceentrada da tabletag para vincular seu MatTableDataSourceà tabela.
<table [dataSource]="dataSource">
<!-- ... -->
</table>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras