gpt4 book ai didi

Angular 2如何让子组件等待异步数据准备好

转载 作者:太空狗 更新时间:2023-10-29 16:52:18 24 4
gpt4 key购买 nike

我正在将异步数据从父组件传递到子组件。并且子组件需要知道数据的长度才能执行某些操作。

问题是子组件无法使用“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;
}
}

处理此问题的最佳做法是什么?

最佳答案

可以通过三种方式实现:

  1. *ngIf 放入父级。仅在父级的 items 准备就绪时呈现子级。
<div *ngIf="items">
<child [items]="items | async">
</div>
  1. 将您的输入 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);
})
}
  1. 在 child 的 ngOnChanges 期间执行。例如引用这里。 https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

关于Angular 2如何让子组件等待异步数据准备好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41389124/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com