转换组件并仍然使用ngFor

Question

我试图模拟从API返回的数据数组上的分页。这对我来说是完美的，但是我需要做的是嵌套另一个组件，它在其中使用ngFor，它的ngFor数据是从被排除的组件中传递下来的。

如果我在转换组件中运行调试器，我可以看到我的完整数组即将出现，我也可以看到它正在拼接，并且创建了一个新的对象，其中包含了我已经变异的数据。

但是，当我尝试使用ngFor呈现组件并传入新数组时，不会呈现任何内容。

我还向该组件添加了调试器，它似乎根本不被触发，因为调试器甚至不会触发。

我的代码如下：

object-transclusion.component.ts

import {Component, OnInit, Input} from '@angular/core';

@Component({
    selector: 'app-object-transclusion',
    template: '<ng-content></ng-content>'
})

export class ObjectTransclusionComponent implements OnInit {

    @Input() items: any;

    public pageNo: number = 1;
    public paginatedItems: string[];

    private results_per_page: number = 1;
    private totalPages: number;

    ngOnInit() {
        this.totalPages = this.getMaxPages();
        this.updatePaginationState();
    }

    public nextPage(): void {
        if (this.pageNo < this.totalPages) {
            this.pageNo++;
            this.updatePaginationState();
        }
    }

    public prevPage(): void {
        if (this.pageNo > 1) {
            this.pageNo--;
            this.updatePaginationState();
        }
    }

    private updatePaginationState(): void {
        this.paginatedItems = [
            ...this.items.slice(
                (this.pageNo - 1) * this.results_per_page, this.pageNo * this.results_per_page
            )
        ];
    }

    private getMaxPages(): number {
        return Math.ceil(this.items.length / this.results_per_page);
    }
}

event-table.component.pug

.event-table-container
    life-event-table-header
    app-object-transclusion([items]='events')
        life-event-table-row(*ngFor='let event of paginatedItems', [event]='event', [canModifyLifeEvents]='canModifyLifeEvents')

如何在transclusion组件中对数据进行排序，使其可用于通过ng内容呈现的组件？

Answer 1

好的，所以看起来解决方案是向

app-object-transclusion(#transclude [items]='events')

这允许我使用以下方法输出数据

*ngFor='let event of transclude.paginatedItems'

不像我喜欢的那样优雅，但它正在起作用。