Я передаю async данные из родительского компонента в дочерний компонент. И дочерний компонент должен знать длину данных, чтобы что-то сделать.
Как проблема заключается в том, что дочерний компонент не может использовать крюк Oninit для выполнения работы, потому что данные в настоящее время недоступны. Итак, как мне это сделать?
Код родительского компонента выглядит так:
@Component({
moduleId: module.id,
selector: 'parent',
template: `<div>
<child [items]="items | async">
</div>`
})
export class Parent implements OnInit {
items: Items[];
constructor(
private itemService: ItemService,
private router: Router
) { }
ngOnInit() {
this.itemService.getItemss()
.subscribe(
items => this.items = items,
error => this.errorMessage = <any>error
);
}
}
И дочерний компонент выглядит следующим образом:
@Component({
moduleId: module.id,
selector: 'child',
template: `<div>
<div *ngFor="let itemChunk of itemChunks"></div>
content here
</div>`
})
export class child implements OnInit{
@Input() items: Items[];
itemChunks: Items[][];
ngOnInit() {
this.itemChunks = this.chunk(this.Items);
}
chunk(items: Items[]) {
let result = [];
for (var i = 0, len = items.length; i < len; i += 6) { // this line causes the problem since 'items' is undefined
result.push(items.slice(i, i + 6));
}
return result;
}
}
Какова наилучшая практика для этого?