i am a newcomer angular users. i just learn how to generate angular material schematic table with using @angular/material:table. recently, i just wanna to replace all data from datasource with my angular-in-memory-web-api data source that i just made. but, there's sneaky error that tellin me "expected 1 arguments, but got 0" in user-table.components.ts (i made bold font for the error occurs in vscode)
here's my code
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { User } from '../user-skeleton';
import { UsersService } from '../users.service';
/**
* Data source for the UserTable view. This class should
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class UserTableDataSource extends DataSource<User>{
data: User[] = [];
paginator: MatPaginator | undefined;
sort: MatSort | undefined;
constructor(
private userService: UsersService
) {
super();
}
getUsers(): void{
this.userService.getUsers()
.subscribe(data => this.data = data)
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
connect(): Observable<User[]> {
if (this.paginator && this.sort) {
return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
.pipe(map(() => {
return this.getPagedData(this.getSortedData([...this.data ]));
}));
} else {
throw Error('Please set the paginator and sort on the data source before connecting.');
}
}
disconnect(): void {}
private getPagedData(data: User[]): User[] {
if (this.paginator) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.splice(startIndex, this.paginator.pageSize);
} else {
return data;
}
}
/**
* Sort the data (client-side). If you're using server-side sorting,
* this would be replaced by requesting the appropriate data from the server.
*/
private getSortedData(data: User[]): User[] {
if (!this.sort || !this.sort.active || this.sort.direction === '') {
return data;
}
return data.sort((a, b) => {
const isAsc = this.sort?.direction === 'asc';
switch (this.sort?.active) {
case 'name': return compare(a.name, b.name, isAsc);
case 'id': return compare(+a.id, +b.id, isAsc);
default: return 0;
}
});
}
}
function compare(a: string | number, b: string | number, isAsc: boolean): number {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
and here is my user-table.compoents.ts
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table';
import { User } from '../user-skeleton';
import { UsersService } from '../users.service';
import { UserTableDataSource } from './user-table-datasource';
@Component({
selector: 'app-user-table',
templateUrl: './user-table.component.html',
styleUrls: ['./user-table.component.css']
})
export class UserTableComponent implements AfterViewInit {
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
@ViewChild(MatTable) table!: MatTable<User>;
dataSource: UserTableDataSource;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'name', 'age', 'gender'];
constructor(
private userService: UsersService
) {
this.dataSource = **new UserTableDataSource();**
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
}
any help would be really appreciated! thanks community :)