Transclude Component и по-прежнему используйте ngFor

Я пытаюсь эмулировать разбиение на страницы массива данных, возвращаемых из 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);
    }
}

таблица-событий.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-контент?


person Harry Blue    schedule 17.02.2017    source источник


Ответы (1)


Итак, похоже, решение состоит в том, чтобы добавить локальную переменную шаблона в

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

Это позволяет мне выводить данные, используя

*ngFor='let event of transclude.paginatedItems'

Не так элегантно, как мне бы хотелось, но работает.

person Harry Blue    schedule 17.02.2017