angular maerial datatable не работает, хотя у меня есть данные, загруженные в мой компонент - PullRequest
0 голосов
/ 31 мая 2019

Использование угловых 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 реализуетDataSource {

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...