Question

使用角度6和角度材料数据表以及分页获取数据。但我在组件中获得了数据，但未在表中呈现。你能帮我到哪里看看吗？

HTML：

    <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
    <ng-container matColumnDef="first_name">
        <mat-header-cell *matHeaderCellDef>First name</mat-header-cell>
        <mat-cell class="first_name-cell" *matCellDef="let data">{{data.user.first_name}}</mat-cell>
      </ng-container>
     <ng-container matColumnDef="last_name">
        <mat-header-cell *matHeaderCellDef>Last name</mat-header-cell>
        <mat-cell class="last_name-cell" *matCellDef="let data">{{data.user.last_name}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="email">
        <mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
        <mat-cell class="email-cell" *matCellDef="let data">{{data.user.email}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="active">
        <mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
        <mat-cell class="active-cell" *matCellDef="let data">{{data.user.active}}</mat-cell>
      </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    </mat-table>
    <mat-paginator [length]="userData.length" [pageSize]="10" [pageSizeOptions]="[5, 10]">

TS文件组件：导出类BusinessUserComponent实现OnInit，AfterViewInit {

    userData: Array<User> = [];
    userCounted: number;
    dataSource: BusinessUserSource;
    displayedColumns = ["first_name", "last_name", "email", "active"];
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
       constructor(
        private router: Router,
        private route: ActivatedRoute,
        private businessService: BusinessDashboardService,
        private auth: AuthService
      ) {
        this.businessId = this.auth.userData.business.id;
      }
    ngOnInit() {
this.dataSource = new BusinessUserSource(this.businessService);
this.dataSource.loadUsers(this.businessId, 1, 10);
this.dataSource.userData$.subscribe(
  (success: any) => {
    this.userData = success;
    console.log(this.userData);
  }
)

}

ngAfterViewInit（）{

this.dataSource.userCount$.subscribe(
  (success: any) => {
    console.log(success);
    this.userCounted = success;
  }
);

}

数据源：

导出类BusinessUserSource实现数据源{

public usersSubject = new BehaviorSubject<User[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$ = this.loadingSubject.asObservable();
public userCount = new BehaviorSubject<number>(0);
public userCount$ = this.userCount.asObservable();
public userData$ = this.usersSubject.asObservable();

constructor(private service: BusinessDashboardService) { }

loadUsers(
    businessId: number,
    pageIndex: number,
    pageSize: number) {
    this.loadingSubject.next(true);
    this.service.allUsers(
        businessId,
        pageIndex,
        pageSize,
        ).pipe(
            catchError(() => of([])),
            finalize(() => this.loadingSubject.next(false))
        )
        .subscribe((success: any) => {
            this.usersSubject.next(success.result.data);
            console.log(success);
            this.userCount.next(success.result.total);
        });
}

connect(collectionViewer: CollectionViewer): Observable<User[]> {
    console.log("Connecting data source");
    return this.usersSubject.asObservable();
}

disconnect(collectionViewer: CollectionViewer): void {
    this.usersSubject.complete();
    this.loadingSubject.complete();
}

}

服务：

allUsers(
  id: number,
  pageNumber,
  pageSize): Observable<User[]> {
  return this.http
    .get("business-user/all/" + id + "?page_no=" + pageNumber + "&limit=" + pageSize)
    .pipe(map(
        (response: any) => response)
    );
}

您可以从我要在表中迭代的数据数组中的用户对象的图像中看到。请检查此链接https://i.stack.imgur.com/CIYFM.png

虽然我在组件中加载了数据，但角度材料数据表无法正常工作

0 个答案: