Question

我需要对表格进行排序，但是MatTableDataSource无法工作...

我不知道如何将数组传递给MatTableDataSource 我需要表中的数据进行显示和排序

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

 }

问题是我无法在MatTableDataSource中传输所需的列表，并且由于这种排序不起作用。

在官方文档Angular Material中，一切看起来都很简单，但是我遇到了未知的问题，很可能是由UserDataSource引起的。

Answer 1

dataSource实例：

dataSource = new MatTableDataSource(this.data);

应在data实例化之后完成：

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

我不知道它是否能完全解决您的问题，但这是第一步：）

错误TS2345：类型'UserDataSource'的参数不能分配给类型'{} []'

1 个答案: