[英]Unable to get Angular Material2 Table sort and paginator to work
我一直試圖在我的Material表上同時實現sort和paginator,但收效甚微。
以下是我的表格,但是當我單擊頁眉時,沒有排序,並且盡管分頁器指示了整個數據集,但仍列出了整個數據集,當我單擊分頁器按鈕時,它也應該具有10個結果,但其自身的狀態發生了變化,但是數據集沒有更新以適應:
import {
AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges,
ViewChild
} from '@angular/core';
import {MatSort, MatPaginator, MatTableDataSource} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';
import {ApiConnectService} from '../../../../../assets/services/api.connect.service';
@Component({
selector: 'app-review-table',
templateUrl: './review.table.component.html',
styleUrls: ['./review.table.component.scss']
})
export class ReviewTable implements OnInit, AfterViewInit, OnChanges {
@Input() purchaseOrders: Array<object>;
@Input() searchKey: string;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<any>(true, null);
displayedColumns = ['rowcount', 'siteId', 'importDate', 'poPoNumber', 'poPrice'];
constructor(private _api: ApiConnectService) { }
ngOnInit() {
this._api.getPurchaseOrders()
.subscribe(data => {
this.dataSource = new MatTableDataSource(data);
}, err => {
console.log(err);
});
}
ngOnChanges(changes: SimpleChanges) {
for (let property in changes) {
if (changes[property].previousValue !== changes[property].currentValue){
if (property === 'searchKey') {
this.applyFilter(this.searchKey);
}
}
}
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
}
在第二個實現中,我僅放置排序代碼,並將訂閱中的數據集的值設置為我的可觀察對象,並且我第二次在數據集聲明之前添加了@ViewChild(MatSort)
。 這項與https://material2-docs-dev.firebaseapp.com/components/table/examples指南所規定的相反的怪異實驗導致排序工作按預期進行:
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { ApiConnectService } from '../../../../assets/services/api.connect.service';
import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
@Component({
selector: 'app-menu3',
templateUrl: './purchase.orders.component.html',
styleUrls: ['./purchase.orders.component.scss']
})
export class PurchaseOrders implements OnInit, AfterViewInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatSort) dataSource: MatTableDataSource<any>;
multipleSelect = true;
selection = new SelectionModel<any>(this.multipleSelect, null);
displayedColumns = ['siteId', 'importDate', 'poPoNumber', 'poPrice'];
constructor(private _api: ApiConnectService) {
}
ngOnInit() {
this._api.getPurchaseOrders()
.subscribe(data => {
this.dataSource = new MatTableDataSource(data);
}, err => {
console.log(err);
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
}
問題是我得到了這個瀏覽器控制台錯誤,導致我的瀏覽器動畫被發送到錯誤的元素->我的數據集。 該錯誤說明數據源的類型錯誤(我猜是嗎?),但是無論如何都會顯示該表和函數:
core.js:1448 ERROR Error: Provided data source did not match an array, Observable, or DataSource
at getTableUnknownDataSourceError (table.es5.js:379)
at MatTable.CdkTable._observeRenderChanges (table.es5.js:860)
at MatTable.CdkTable.ngAfterContentChecked (table.es5.js:577)
at callProviderLifecycles (core.js:12702)
at callElementProvidersLifecycles (core.js:12673)
at callLifecycleHooksChildrenFirst (core.js:12656)
at checkAndUpdateView (core.js:13806)
at callViewAction (core.js:14153)
at execComponentViewsAction (core.js:14085)
at checkAndUpdateView (core.js:13808)
簡而言之,這不是解決方案。
我嘗試使用@ViewChild(MatSort) @ViewChild(MatPaginator) dataSource: MatTableDataSource<any>;
我的小技巧加倍@ViewChild(MatSort) @ViewChild(MatPaginator) dataSource: MatTableDataSource<any>;
但是那沒有結果。 它只是忽略了MatPaginator部分。 分頁器仍未鏈接。
聲明表的組件是否必須與進行數據的API調用的組件相同,或者是否允許在父級中進行數據調用並通過@Input
將其傳遞給表?
在后一種情況下(我將表作為子級放置到檢索該數據的組件中),使列排序和分頁工作時我缺少什么?
強制排序工作時為什么會出現此錯誤?
您收到一些異步數據后,創建MatTableDataSource。 所以可以肯定的是
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
this.dataSource
可能為null
你能改變嗎
constructor(private _api: ApiConnectService) { }
ngOnInit() {
this._api.getPurchaseOrders()
.subscribe(data => {
this.dataSource = new MatTableDataSource(data);
}, err => {
console.log(err);
});
}
至
constructor(private _api: ApiConnectService) {
this.dataSource = new MatTableDataSource(data); // create MatTableDataSource (synchronous) here to allow sort / filtering binding
}
ngOnInit() {
this._api.getPurchaseOrders()
.subscribe(data => {
this.dataSource.data = data; // populate data here
}, err => {
console.log(err);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.