使用材料表进行分页和排序

Question

我正在使用 Angular Material 表格组件，我正在尝试使用 TableDataSource 实现排序和分页。我浏览了一些文档和演示，但都没有我需要的东西。 文档

irossimoline/angular4-material-table GitHub repository

StackBlitz

从文档和示例来看，实现这两个功能非常简单，但是，使用 TableDataSource 时出现错误（请参阅 component.ts ngAfterViewInit() 方法）

错误 TS2339 类型上不存在属性“分页器” '表数据源'

同样的排序错误：

错误 TS2339 类型“TableDataSource”上不存在属性“排序”

HTML

<mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="ID">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
        <mat-cell *matCellDef="let row">          
            {{row.currentData.id}}
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Comment">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Commment </mat-header-cell>
        <mat-cell *matCellDef="let row">
            <mat-form-field floatPlaceholder="{{ row.editing ? 'float' : 'never'}}">
                <input matInput [formControl]="row.validator.controls['Comment']" placeholder="Comment" [(ngModel)]="row.currentData.Comment">
            </mat-form-field>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="actionsColumn">
        <mat-header-cell *matHeaderCellDef>
            <button mat-icon-button color="accent" (click)="dataSource.createNew()"><i class="fa fa-plus mat-icon"></i></button>
        </mat-header-cell>
        <mat-cell *matCellDef="let row">
            <button *ngIf="!row.editing" mat-icon-button color="primary" focusable="false" (click)="row.startEdit()">
                <i class="fa fa-pencil mat-icon"></i>
            </button>
            <button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate()">
                <i class="fa fa-check mat-icon"></i>
            </button>
            <button mat-icon-button color="primary" focusable="false" (click)="row.cancelOrDelete()">
                <i class="fa fa-times mat-icon"></i>
            </button>
        </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, 20]">
</mat-paginator>

组件.ts

class TodoItem {
    ID: number;
    Comment: string;
}
export class DashboardComponent implements OnInit {
    @Output() personListChange = new EventEmitter<TodoItem>();
    dataSource: TableDataSource<TodoItem>;
    @Output() personListChange = new EventEmitter<TodoItem>();
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    @Input() todoList = [];

    constructor(private _dashboardService:  private todoItemValidator: ValidatorService) {}

    ngOnInit(): void {
        this.GetToDoList(this.userID);
        this.dataSource = new TableDataSource<any>(this.todoList, TodoItem, this.todoItemValidator);
        this.dataSource.datasourceSubject.subscribe(todoList => this.personListChange.emit(todoList));
    }

    GetToDoList(ID: string) {

        ///some code
    }

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort; 
    }

Answer 1

错字是你的结局。应该是 MatTableDataSource

TodoItem 也应该使用接口而不是类