作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在将异步数据从父组件传递到子组件。并且子组件需要知道数据的长度才能执行某些操作。
问题是子组件无法使用“Oninit” Hook 来工作,因为此时数据不可用。那么我该怎么做呢?
父组件代码如下:
@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;
}
}
处理此问题的最佳做法是什么?
最佳答案
可以通过三种方式实现:
*ngIf
放入父级。仅在父级的 items
准备就绪时呈现子级。<div *ngIf="items">
<child [items]="items | async">
</div>
getter
setter
分隔开。然后在设置值时执行,您也可以使用 RxJS BehaviorSubject
。private _items = new BehaviorSubject<Items[]>([]);
@Input() set items(value: Items[]) {
this._items.next(value);
}
get items() {
return this._items.getValue();
}
ngOnInit() {
this._items.subscribe(x => {
this.chunk(x);
})
}
ngOnChanges
期间执行。例如引用这里。 https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges 关于Angular 2如何让子组件等待异步数据准备好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41389124/
我是一名优秀的程序员,十分优秀!