Question

所以我得到了以下标记

.html

<div *ngFor="let portal of portalItems">
    <mat-form-field>
        <input ([ngModel])="getCategoryLabelDetails(portal.id).query" />
    </mat-form-field>
    <div *ngFor="let item of items">
        {{ item.name }}
    </div>
    <mat-paginator [pageSizeOptions]="[5,10,25,50,100]"
                      [length]="getCategoryLabelDetails(portal.id).resultsLength"
                      [pageIndex]="getCategoryLabelDetails(portal.id).page"
                      [pageSize]="getCategoryLabelDetails(portal.id).perPage" [showFirstLastButtons]="true"
                      (page)="pageChangeEvent($event, portal)">
    </mat-paginator>
</div>

.ts

export interface PortalOptions {
    portalId: number;
    data: Category[];
    page: number;
    query: string;
    isPanelExpanded: boolean;
    loading: boolean;
    perPage: number;
    resultsLength: number;  
}    

getCategoryLabelDetails(portalId: number): PortalOptions {
    return this.categoryLabelOptions.find((optionItem: PortalOptions) => optionItem.portalId === portalId);
}

我无法以编程方式更改分页器页面，以前我是通过@ViewChild选择器进行操作的。

@ViewChild('matPaginator') paginator: MatPaginator;

exampleMethod(page: number) {
    this.paginator.pageIndex = page;
}

但是在这种情况下，我有x个mat-paginator实例，所以我不能在那里使用@ViewChild。

我还试图将paginator对象传递到我的搜索函数中

.html

<mat-paginator #paginator></mat-paginator>

 <mat-form-field>
     <input ([ngModel])="getCategoryLabelDetails(portal.id).query" (ngModelChange)="search($event, paginator)" />
 </mat-form-field>

.ts

search(event, paginator) {
    // paginator is undefined there
    paginator.pageIndex = 0;
}

总结：我如何通过以下方式访问mat-paginator实例* ngFor的第一个循环？

第一个实例是pageIndex = 5，第二个实例是pageIndex = 4，然后以编程方式将这些值更改为第一个实例pageIndex = 2和第二个pageIndex = 7。

已解决：只需创建将处理ngFor循环内容的组件，例如：

<div *ngFor="let portal of portalItems">
    <m-example-list [portalItem]="portal"></m-example-list>
</div>

因此在组件内部，我可以使用ViewChild来修改分页器pageIndex。因为现在我每个组件只有一个分页程序实例。

Answer 1

您有mat-paginator的许多实例。使用@ViewChildren而非@ViewChild来获取对组件的引用。

在TS中：

@ViewChildren(MatPaginator) paginators !: QueryList<MatPaginator>;

有关更多详细信息，请参考官方文档：https://angular.io/api/core/ViewChildren

* ngFor指令

1 个答案: