Transclude Component 仍然使用 ngFor

Question

我正在尝试对从 API 返回的数据数组进行分页。这对我来说非常适合我，但是我需要做的是在其中嵌套另一个使用 ngFor 的组件，它的 ngFor 数据是从我的嵌入组件传递下来的。

如果我运行我的嵌入组件中有一个调试器，我可以看到我的完整数组进入，我还可以看到它被拼接，并且创建了一个包含我已经变异的数据的新对象。

但是，当我尝试使用 ngFor 渲染我的组件并传入新数组时，没有渲染任何内容。

我也为这个组件添加了一个调试器，它似乎根本没有被触发，因为调试器甚至没有触发。

我的代码如下：

对象-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);
    }
}

事件-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')

如何对嵌入组件中的数据进行排序，使其可用于通过 ng-content 呈现的组件？

Answer 1

好的，看来解决方案是将本地模板变量添加到

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

这允许我使用

输出数据

*ngFor='let event of transclude.paginatedItems'

没有我喜欢的那么优雅，但它正在工作。

Transclude Component 仍然使用 ngFor

Transclude Component and still use ngFor

transclusion

angular