0

我已经坚持了两天，我希望有人能指出我的解决方案。我有一个使用 Akita 进行状态管理的 Angular 应用程序，其中一个组件的任务是加载客户列表。我已将代码的重要部分放在下面。

// customers.component.ts
export class IndexComponent implements OnInit, AfterViewInit, OnDestroy {
    
    // Constructor and other definitions are here

    customers$: Observable<Customer[]>;
    @ViewChild(MatPaginator) private _paginator: MatPaginator;
    @ViewChild(MatSort) private _sort: MatSort;

    ngOnInit(): void {
        this.customerService.get().subscribe();

        this.customers$ = this._customersQuery.customers$;
    }

    ngAfterViewInit(): void {
        if (this._sort && this._paginator) {
            // Code here is never executed
        }
    }
}

// customer.service.ts
export class CustomerService extends NgEntityService<CustomerState> {
    
    // Constructor is here
    
    get() {
        return this.http.get<Customer[]>('/api/customers').pipe(
            tap(entities => {
                this.CustomerStore.set(entities);
            })
        );
    }
}

// customer.query.ts
export class CustomerQuery extends QueryEntity<CustomerState> {

    public customers$: Observable<Customer[]> = this.selectAll();

    constructor(protected store: CustomerStore) {
        super(store);
    }

}

// customer.component.html
<ng-container *ngIf="(customers$ | async) as customers">
    <ng-container *ngIf="customers.length > 0; else noCustomers">
        // The table goes here
        <mat-paginator>
            // Paginator options go here
        </mat-paginator>
    </ng-container>
</ng-container>

<ng-template #noCustomers><p>No Customers</p></ng-template>

无论我做什么，我总是得到一个undefinedPaginator 实例。我不确定我做错了什么。我将不胜感激任何帮助。谢谢你。

4

1 回答 1

1

问题是您使用的元素ViewChild位于ngIf：

      @ViewChild(MatPaginator) private _paginator: MatPaginator;

初始化组件时，您尝试绑定的分页器不在 DOM 中，因为它被 隐藏了ngIf，因此不会发生绑定。

这是关于如何解决这个问题的长期讨论。TLDR 解决方案是使用绑定到本机 HTMLhidden属性并翻转您的ngIf逻辑。由于ngIfs 的嵌套和使用ng-containers，而不是divs，因此您的代码并不那么简单。

于 2021-10-07T15:06:47.043 回答