Разбиение на страницы не работает для mdbTable при использовании источника данных ввода - PullRequest
Новая
       30

Разбиение на страницы не работает для mdbTable при использовании источника данных ввода

0 голосов
/ 11 октября 2019

Я сделал этот компонент, и у него есть Вход , который будет элементами для таблицы. Выглядит это так: 

@Input() products: any[];
@ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
@ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
@ViewChild('row', { static: true }) row: ElementRef;

headElements: any[];

searchText: string = '';
previous: string;

maxVisibleItems: number = 10;

constructor(private cdRef: ChangeDetectorRef) {}

@HostListener('input') oninput() {
    this.mdbTablePagination.searchText = this.searchText;
}

ngOnInit() {
    this.populateHeadElements(this.products);

    this.mdbTable.setDataSource(this.products);
    this.products = this.mdbTable.getDataSource();
    this.previous = this.mdbTable.getDataSource();
}

ngAfterViewInit() {
    this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
    this.mdbTablePagination.calculateFirstItemIndex();
    this.mdbTablePagination.calculateLastItemIndex();
    this.cdRef.detectChanges();
}

Но по какой-то причине, когда продукты загружаются, даже если текст нумерации страниц верный

1 - 10 из 1790

На самом деле он просто отображает каждую строку на одной странице. Кто-нибудь знает почему?

Это HTML 

<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true" striped="true" class="z-depth-1">
    <thead class="sticky-top">
        <tr>
            <th *ngFor="let head of headElements; let i = index" [mdbTableSort]="products"
                [sortBy]="headElements[i]" scope="col">{{head | titlecase}} <mdb-icon fas icon="sort">
                </mdb-icon>
            </th>
        </tr>
    </thead>
    <tbody #row>
        <tr mdbTableCol *ngFor="let el of products; let i = index">
            <td *ngFor="let head of headElements">{{el[head]}}</td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
        <tr>
            <td colspan="4">
                <mdb-table-pagination [tableEl]="tableEl" paginationAlign="" [searchDataSource]="products">
                </mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>
...