angular 8，无法读取未定义的属性“sortChange”

Question

我在前端应用程序中使用 angular 8，但出现此错误：

无法读取未定义的属性“sortChange”

我尝试在我的数据表中添加分页（与服务器通信的分页）

代码组件：

        // Angular
    import { Component, ElementRef, OnInit, ViewEncapsulation, ViewChild, AfterViewInit } from '@angular/core';
    import { MatPaginator, MatSort } from '@angular/material';
    import { MatTableDataSource } from '@angular/material/table';
    import { PartnerService } from '../../../../core/partner/services/partner.service';
    import { PartnerDataSource } from '../../../../core/partner/services/partner.datasource.service';
    import { merge, Subscription } from 'rxjs';
    import { tap } from 'rxjs/operators';
    import { SelectionModel } from '@angular/cdk/collections';


    @Component({
        selector: 'kt-partner-list',
        templateUrl: './partner-list.component.html',
        encapsulation: ViewEncapsulation.None
    })
    export class PartnerListComponent implements AfterViewInit, OnInit {

        title = 'mte-test';
        displayedColumns = ['label', 'email', 'personalPhone', 'nature', 'type', 'organization'];
        @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
        @ViewChild(MatSort,{static: false}) sort: MatSort;  
        dataSource:  PartnerDataSource;
        @ViewChild('input',{static: true}) input: ElementRef;
        selection = new SelectionModel<Element>(true, []);
        listPartners: Element[] = [];


        /**
         * 
         * @param partnerService: PartnerService 
         */
        constructor(
            private partnerService: PartnerService
        ){}

        ngOnInit(): void {
            this.dataSource = new PartnerDataSource(this.partnerService);       
            this.dataSource.loadPartners(1);
                
        }

        ngAfterViewInit(){  
                this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
                
                merge(this.sort.sortChange, this.paginator.page)
                .pipe(
                    tap(() => {
                        this.loadPartnerList();
                    }
                    )
                )
                .subscribe();
        }

        loadPartnerList() {
            this.dataSource.loadPartners(this.paginator.pageIndex);
        }
    }
    export interface Element {
        label: string;
        email: string;
        personalPhone: string;
        nature: string;
        type: string;
        organization: string;
    }

代码html：

        <div class=" mat-table__wrapper">
                <mat-table class="lmat-elevation-z8" matTableExporter [dataSource]="dataSource" 
                matSort>
                    <ng-container matColumnDef="select">
                        <mat-header-cell *matHeaderCellDef class="mat-column-checkbox">
                            <mat-checkbox (change)="$event " [indeterminate]="selection.hasValue() && !isAllSelected()">
                            </mat-checkbox>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let element" class="mat-column-checkbox" (click)="$event" (change)="$event">
                            <mat-checkbox>
                            </mat-checkbox>
                        </mat-cell>
                    </ng-container>                
                    <ng-container matColumnDef="label">
                        <mat-header-cell *matHeaderCellDef> {{ 'PARTNER.RAISON_SOCIAL' | translate }} </mat-header-cell>
                        <mat-cell *matCellDef="let element"> {{element.label}} </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 [length]="11" [pageSize]="3"
                    [pageSizeOptions]="[3, 5, 10]"></mat-paginator>
            </div>

当页面加载时，我有错误排序，当我点击下一页时，分页不起作用

Answer 1

此问题是由于缺少MatSortModule模块造成的。要导入模块：

在 app.module.ts（或共享模块）中

import { MatSortModule } from '@angular/material';

@NgModule({
    imports: [ 
       MatSortModule
    ]
})