Question

我试图模仿从API返回的数据数组的分页。这对我来说非常适合我，但是我需要做的是嵌套另一个在其中使用ngFor的组件，并使用它来从我的被转换组件传递数据。

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

但是，当我尝试使用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')

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

Answer 1

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

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

这允许我使用

输出数据

*ngFor='let event of transclude.paginatedItems'

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

转换组件并仍然使用ngFor

1 个答案: