Transclude Component und weiterhin ngFor

Question

Ich versuche, Seitennummerierung auf einem Array von Daten emulieren, die von einer API zurückgegeben werden. Dies funktioniert für mich perfekt für mich, aber was ich tun muss, ist eine andere Komponente verschachteln, die ngFor innerhalb verwendet wird, mit es ist ngFor Daten von meiner übergelaufenen Komponente weitergegeben werden.

Wenn ich einen Debugger in meiner Transklusionskomponente starte, kann ich sehen, dass mein komplettes Array eingeht, ich kann auch sehen, dass es gespleißt ist und ein neues Objekt erstellt wurde, das die Daten enthält, die ich mutiert habe.

Wenn ich jedoch versuche, meine Komponente mit dem ngFor zu rendern und das neue Array zu übergeben, wird nichts gerendert.

Ich habe auch einen Debugger zu dieser Komponente hinzugefügt und es scheint überhaupt nicht ausgelöst zu werden, da der Debugger nicht einmal ausgelöst wird.

Mein Code ist wie folgt:

Objekt-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); 
    } 
} 

ereignis 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') 

Wie kann ich sortieren Daten in der Inclusion-Komponente, so dass sie für eine über ng-Content gerenderte Komponente zur Verfügung stehen?

Answer 1

Ok, so sieht es aus wie die Lösung eine lokale Vorlage Variable

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

Dies ermöglicht es mir die Ausgabe

unter Verwendung der Daten hinzuzufügen ist

*ngFor='let event of transclude.paginatedItems' 

nicht so elegant wie Ich mag, aber es funktioniert.