error TS2345: Argument of type 'UserDataSource' is not assignable to parameter of type '{}[]'

Question

I need to sort the table but MatTableDataSource does not work ...

I can't figure out how to pass an array to MatTableDataSource I need the data in the table to be displayed and sorted

//This is Component.ts

export class TestSortTableComponent implements OnInit {

displayedColumns = ['fullName', 'birthDate', 'phone', 'email', 'skype', 
'position', 'startDate', 'endDate', 'action'];

data: UserDataSource ;

dataSource = new MatTableDataSource(this.data);
@ViewChild(MatSort) sort: MatSort;
constructor(
private userService: UserService,
private activatedRoute: ActivatedRoute,
private tableQueryParams: TableQueryParamsService,
private httpService: UserService,
private router: Router
)  {}

ngOnInit() {  
this.data = new UserDataSource(this.userService, this.activatedRoute);
}
}

//this is html:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation- 
z8">

<ng-container matColumnDef="fullName">
<mat-header-cell *matHeaderCellDef >Full name</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.fullName }}</mat-cell>
</ng-container>

<ng-container matColumnDef="birthDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Birthday</mat-header- 
cell>
<mat-cell *matCellDef="let user">{{ user.birthDate | date }}</mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-header-row *matRowDef="let row; columns: displayedColumns"></mat- 
header-row>
</table>



//this is UserDataSource.ts:


export class UserDataSource implements DataSource<UserModel> {
[x: string]: any;
public usersSubject = new BehaviorSubject<PagedContentModel>({
    items: [],
    total: 0
});
private queryParamsSubscriber: Subscription;
paginator: any;
sort: any;


constructor(
    private userService: UserService,
    private activatedRoute: ActivatedRoute,

) { }

public connect(collectionViewer: CollectionViewer): 
Observable<UserModel[]> {
    this.queryParamsSubscriber = 
this.activatedRoute.queryParamMap.subscribe((paramMap) => {
        this.loadUsers(
            +paramMap.get('page'),
            paramMap.get('sortBy'),
            paramMap.get('sortOrder'),
            paramMap.get('gender'),
            paramMap.get('startDate'),
            paramMap.get('endDate'),
            paramMap.get('keyWord'),

        );
    });
    return this.usersSubject.asObservable()
        .pipe(
            map((response) => response.items)
        );
 }

 disconnect(collectionViewer: CollectionViewer) {
    this.queryParamsSubscriber.unsubscribe();
    this.usersSubject.complete();
 }

 getTotalObservable(): Observable<number> {
    return this.usersSubject.asObservable()
        .pipe(
            map((response) => response.total)
        );
 }

 private loadUsers(page = 0, sortBy = '', sortOrder = 'asc', gender, 
 startDate, endDate,keyWord) {
    const f = {
        gender,
        startDate,
        endDate,
        keyWord
    };
    this.userService.getUsers(page, sortBy, sortOrder, 
f).subscribe((response) => {
        this.usersSubject.next(response);
    });
}
}


//this is getUsers method:

getUsers(page = 0, sortBy = '', sortOrder = 'asc', filter): 
Observable<any> {
let params: HttpParams = new HttpParams()
  .set('page', page ? page.toString() : '0')
  .set('sortBy', sortBy || '')
  .set('sortOrder', sortOrder || '');

if (filter) {
  for (let key in filter) {
    let value = filter[key];
    if(value){

      params = params.set(key, value);
    }
  }
 }

 return this.http.get(`${environment.apiBaseUrl}/employees`, { params });

 }

The problem is that I can not transfer the desired list in MatTableDataSource and because of this sorting does not work.

In the official documentation Angular Material Everything looks very simple, but I ran into unknown problems that are most likely caused by UserDataSource.

Answer 1

The dataSource instanciation:

dataSource = new MatTableDataSource(this.data);

sould be done after the data instanciation:

this.data = new UserDataSource(this.userService, this.activatedRoute);

I don't know if it fully solved your problem but it is a first step :)