2
API에서 반환 된 데이터 배열에서 페이지 매김을 에뮬레이션하려고합니다. 이것은 나를 위해 완벽하게 작동하지만, 내가해야 할 일은 ngFor를 사용하는 다른 구성 요소를 중첩시키는 것입니다. ngFor는 내 transcluded 구성 요소에서 전달되는 데이터입니다.컴포넌트를 옮겨서 여전히 ngFor를 사용합니다.
내 transclusion 구성 요소 내에서 디버거를 실행하면 전체 배열이 들어올 수 있으며 spliced되고 변형 된 데이터가 포함 된 새 개체가 생성 된 것을 볼 수 있습니다.
그러나 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')
어떻게 종류 I 수 데이터를 변환 요소에 넣고, ng- 콘텐츠를 통해 렌더링 된 구성 요소에 사용할 수있게할까요?