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-контент?

Answer 1

Ok так это выглядит как решение, чтобы добавить локальную переменную шаблона в

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

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

*ngFor='let event of transclude.paginatedItems' 

Не так элегантно, как мне нравится, но это работает.