Transclude成分，並使用ngFor

我試圖效仿分頁陣列上的從API返回的數據。這是爲我工作完美的我，但我需要做的是巢這是使用ngFor這裏面的另一個組成部分，它是從我transcluded組件被流傳下來ngFor數據。Transclude成分，並使用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呈現的組件？

來源

2017-02-17 pgGriff

好了，所以它看起來像解決方案是使用

*ngFor='let event of transclude.paginatedItems'

不優雅，因爲我喜歡本地模板變量添加到

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

這使我能夠輸出的數據，但它工作中。

來源

2017-02-17 07:24:41 pgGriff

Transclude成分，並使用ngFor

回答

相關問題