我正在尝试使用paginator组件在我的angular 2 app中实现一个表。
我成功地能够使用角度为2的表组件创建表。但是我使用下面的import语句来完成它。
"从' @ angular / cdk / collections';""
导入{DataSource}import { Component , OnInit , ViewChild} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
displayedColumns = ['num', 'message'];
dataSource: eDataSource;
ELEMENT_DATA: Element[] = [
{num: 1, message: 'Message 1 '},
{num: 2, message: 'Message 2 '},
{num: 3, message: 'Message 3 '},
{num: 4, message: 'Message 4 '},
{num: 5, message: 'Message 5 '},
{num: 6, message: 'Message 6 '},
{num: 7, message: 'Message 7 '},
{num: 8, message: 'Message 8 '},
{num: 9, message: 'Message 9 '},
{num: 10, message: 'Message 10 '},
{num: 11, message: 'Message 11 '},
{num: 12, message: 'Message 12 '},
{num: 13, message: 'Message 13 '},
{num: 14, message: 'Message 14 '},
{num: 15, message: 'Message 15 '},
{num: 16, message: 'Message 16 '},
{num: 17, message: 'Message 17 '},
{num: 18, message: 'Message 18 '},
{num: 19, message: 'Message 19 '},
{num: 20, message: 'Message 20'},
];
ngOnInit() {
this.dataSource = new eDataSource(this.ELEMENT_DATA);
}
}
export interface Element {
num: number;
message: string;
}
export class eDataSource extends DataSource<any> {
constructor(private element: Element[]) {
super();
}
connect(): Observable<Element[]> {
return Observable.of(this.element);
}
disconnect() {}
}
<mat-card class="styletable">
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="num" >
<mat-header-cell style="max-width: 100px;" *matHeaderCellDef> No. </mat-header-cell>
<mat-cell style="max-width: 100px;" *matCellDef="let element"> {{element.num}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="message">
<mat-header-cell *matHeaderCellDef> Message </mat-header-cell>
<mat-cell style="text-align: left;" *matCellDef="let element"> {{element.message}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[ 5, 10, 25, 100 ]">
</mat-paginator>
</div>
</mat-card>
使用上面的代码我在我的cli中收到以下错误
&#34; D:/Angular/loginmat/src/app/home/home.component.ts(20,21):属性&#39; paginator&#39;类型&#39; eDataSource&#39;。&#34;
上不存在任何人都可以指导我,以便在我的桌子上实施分页器时我缺少什么?
答案 0 :(得分:1)
要设置数据源,您应该使用MatTableDataSource。它包含一个分页器属性。
这是TS文件的固定版本:
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
@Component({
selector: 'app-home',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.css']
})
export class HomeComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatPaginator) dataSource: MatTableDataSource<Element>;
displayedColumns = ['num', 'message'];
ngOnInit() {
this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.paginator = this.paginator;
}
}
const ELEMENT_DATA: Element[] = [
{ num: 1, message: 'Message 1 ' },
{ num: 2, message: 'Message 2 ' },
{ num: 3, message: 'Message 3 ' },
{ num: 4, message: 'Message 4 ' },
{ num: 5, message: 'Message 5 ' },
{ num: 6, message: 'Message 6 ' },
{ num: 7, message: 'Message 7 ' },
{ num: 8, message: 'Message 8 ' },
{ num: 9, message: 'Message 9 ' },
{ num: 10, message: 'Message 10 ' },
{ num: 11, message: 'Message 11 ' },
{ num: 12, message: 'Message 12 ' },
{ num: 13, message: 'Message 13 ' },
{ num: 14, message: 'Message 14 ' },
{ num: 15, message: 'Message 15 ' },
{ num: 16, message: 'Message 16 ' },
{ num: 17, message: 'Message 17 ' },
{ num: 18, message: 'Message 18 ' },
{ num: 19, message: 'Message 19 ' },
{ num: 20, message: 'Message 20' },
];
export interface Element {
num: number;
message: string;
}