Question

我有一个api从后端发送数据，因此当我尝试以角度获取此数据时，第一次不会加载数据，并且我的表保持为空，但是例如打印来自banckend，然后在我的数据源中进行设置，表已正确填充。

我的代码是：

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;
  }

}

组件

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;
  }
}

我不确定是否使用正确的方法来填表，还是错过了一些东西。

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

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

注意：我使用角形材料示意图来创建所有这些内容，在默认代码中，它使用静态数据，这对我来说不是解决方案，我需要使用动态数据。 / p>

Answer 1

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

UsersService

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

UserService仅返回用户集合的承诺。
在您的UserListComponent中，创建类型为MatTableDataSource的{{1}}，然后等待服务中的数据。然后，一旦完成，将数据添加到User。

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; } }标记中的dataSource输入将您的table绑定到表。

MatTableDataSource

Answer 2

我不太清楚问题到底出在哪里，但是最近我用角度材料写了几张桌子。这是我用来连接表格的简单方法。

function scrollDown() {
 //once this bottom element disappears we found all the posts
var bottom = document.querySelector('._4emnV')

if (bottom != null) {
    window.scroll(0,999999)
 }
 else
 {
    return "STOP"
 }

}

然后在组件类中：

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();
  }
}

，然后是HTML模板：

public dataSource: UserDataSource;

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

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

2 个答案:

使用角度数据源使用API​​中的数据填充材料表

2 个答案:

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