我一直在尝试在我的材料表上实现排序和paginator。
以下给我我的表格,但是当我单击标头时,没有任何排序发生,并且尽管Paginator表明当我单击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/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>;
将我的小骇客插入一倍,但这毫无结果。它只是忽略了matpaginator部分。Paginator仍然没有链接。
是该表被声明的组成部分是与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);
});
}
to
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);
});
}