Question

我的代码有问题。

材质数据表生成正常，过滤器模块也正常工作，但排序和分页不起作用。

我的数据源来自我的 API。

显示短路的箭头，点击它可以工作，但我的表格没有任何变化。也分页显示，但当我改变数字时，什么也没发生。

老实说，我尝试了一切，但没有结果

你能帮我吗？

HTML

    <!-- begin:Table -->
        <div class="table-responsive angular-bootstrap-table">

            <div fxLayout fxLayoutAlign="center center">
                <mat-form-field fxFlex="40%">
                    <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
                </mat-form-field>
            </div>

            <table mat-table [dataSource]="dataSource" matSort class="table table-head-custom table-vertical-center overflow-hidden">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
                    <td mat-cell *matCellDef="let element"> {{element.id.substring(0,4) + "..."}} </td>
                </ng-container>
                <ng-container matColumnDef="firstName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'USER_MANAGEMENT.USERS.FIELDS.FIRST_NAME' | translate }} </th>
                    <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
                </ng-container>
                <ng-container matColumnDef="lastName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'USER_MANAGEMENT.USERS.FIELDS.LAST_NAME' | translate }} </th>
                    <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
                </ng-container>
                <ng-container matColumnDef="email">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'USER_MANAGEMENT.USERS.FIELDS.EMAIL' | translate }} </th>
                    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
                </ng-container>

                   ........

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
            <mat-paginator [pageSize]="2" [pageSizeOptions]="[2, 4, 6, 10, 20]">
            </mat-paginator>

        </div>
        <!-- end: Table -->

组件

export class UsersComponent implements OnInit, AfterViewInit {
    hasError: boolean;
    errorType: number;
    allUsers: UserModel;
    test: string;
    isLoaded = new BehaviorSubject<boolean>(false);
    returnUrl: string;

    public dataSource = new MatTableDataSource<UserModel>();
    public displayedColumns = ['id', 'firstName', 'lastName', 'email', 'emailConfirmed', 'lockoutEnabled', 'actions'];

    @ViewChild(MatSort, {static: false}) sort: MatSort;
    @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;


    private unsubscribe: Subscription[] = [];

    constructor(
        private userService: UsersService,
        private modalService: NgbModal,
        private route: ActivatedRoute,
        private router: Router,
        private snackBar: MatSnackBar
    ) {
    }

    ngOnInit(): void {
        this.hasError = false;
        this.fetchUsers();
        this.returnUrl =
            this.route.snapshot.queryParams['returnUrl'.toString()] || '/';
    }

    ngAfterViewInit(): void {

    }

    public doFilter = (value: string) => {
        this.dataSource.filter = value.trim().toLocaleLowerCase();
    }

    fetchUsers() {
        this.userService.getAllUsers().subscribe(users => {
            this.allUsers = users;
            if (this.allUsers !== undefined) {
                this.isLoaded.next(true);
            }
            this.dataSource.data = users as UserModel[];
            this.dataSource.sort = this.sort;
            this.dataSource.paginator = this.paginator;
        });
    }
}

Answer 1

如果你有你的分页器在 *ngIf 我想象一些典型的

<div *ngIf="this.dataSource.data" else loading>
   ..here your table..

   ..here your paginator...
</div>
<ng-template #loading>
loading data...
</ng-template>

当你给 dataSource.data 赋值时，“分页器”不在这里，所以你需要对 Angular 进行更改以重新绘制数据源。你可以使用一个简单的 setTimeout() SetTimeout 只对 Angular 说：“嘿，用日期重新绘制应用程序，然后记住执行另一个指令）(*)

this.userService.getAllUsers().subscribe(users => {
    ...
    this.dataSource.data = users as UserModel[];
    setTimeout(()=>{
         this.dataSource.sort = this.sort;
         this.dataSource.paginator = this.paginator;
    })
});

(*) 你也可以使用 ChangeDetectorRef

角度材料数据表不排序数据

1 个答案: