Question

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

irossimoline/angular4-material-table GitHub repository

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

错误TS2339属性＆＃39; paginator＆＃39;在类型上不存在＆＃39; TableDataSource＆＃39;

排序相同的错误：

错误TS2339属性＆＃39;排序＆＃39;类型＆＃39; TableDataSource＆＃39;
上不存在

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>

component.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

也应该使用interface而不是TodoItem的类

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

1 个答案: