[英]Angular5 - How to pass ASYNC data from parent to child component
When I try to pass ASYNC data from parent to child component, I'm getting undefined message. 当我尝试将ASYNC数据从父组件传递到子组件时,出现了未定义的消息。
Because of ASYNC data, I suppose data coming from parent is not yet bound at OnInit. 由于存在ASYNC数据,我想来自父对象的数据尚未绑定到OnInit。
In parent.component.html : 在parent.component.html中:
<my-child [childdata]="parentdata"></my-child>
In parent.component.ts : 在parent.component.ts中:
interface SpotBB {
id: number;
name: string;
}
...
export class ParentComponent implements OnInit {
parentdata: Observable<SpotBB[]>;
...
ngOnInit() {
this.parentdata = this.spotsservice.getSpots();
// Call a service - Data stored in Firestore
}
In child.component.html : 在child.component.html中:
<button (click)="mycheck()">TEST</button>
<div *ngFor="let spot of childdata | async" >
{{ spot.id }} --- {{ spot.name }} <!-- Works fine -->
</div>
In child.component.ts : 在child.component.ts中:
interface SpotBB {
id: number;
name: string;
}
...
export class ChildComponent implements OnInit {
@Input() childdata: Observable<SpotBB[]>;
copydata: Observable<SpotBB[]>;
...
mycheck() {
alert(JSON.stringify(this.copydata)); // --> !!! undefined !!!
}
ngOnInit() {
this.copydata = this.childdata; // COPY DATA NOT WORKING
}
You can implement several options to get it wokring: 您可以实现几个选项以使其正常运行:
1. Listen for changing @Input in your child component using ngOnChanges
: 1.使用
ngOnChanges
监听子组件中的ngOnChanges
:
// child component
export class ChildComponent implements OnInit {
@Input() childdata;
ngOnChanges(changes: SimpleChanges) {
// on loading you can access childdata
console.log(changes.childdata.currentValue);
}
2. Using set
in child component for childdata
: 2.使用
set
在子组件childdata
:
// child component
export class ChildComponent implements OnInit {
private _childdata;
@Input() set childdata(value) {
this._childdata = value;
}
// get method for childdata (for *nfFor in template)
get childdata() {
return this._childdata;
}
3. Make child component available (if it is acceptable) only after parentdata
will be available: 3.仅在
parentdata
可用之后, parentdata
使子组件可用(如果可以接受):
parent component html: 父组件html:
<my-child *ngIf="parentDataLoaded" [childdata]="parentdata"></my-child>
In parent.component.ts : 在parent.component.ts中:
interface SpotBB {
id: number;
name: string;
}
...
export class ParentComponent implements OnInit {
parentdata: Observable<SpotBB[]>;
parentDataLoaded: false;
...
ngOnInit() {
this.spotsservice.getSpots()
.subscribe(res => {
// here is your successful results
this.parentdata = res;
this.parentDataLoaded = true;
});
}
For all options, I'm guessing to subscribe to getSpots
, receive parentdata
in your parent component and assign to this.parentdata
: 对于所有选项,我
getSpots
订阅getSpots
,在父组件中接收parentdata
并分配给this.parentdata
:
// parent component
ngOnInit() {
this.spotsservice.getSpots()
.subscribe(res => {
// here is your successful results
this.parentdata = res;
});
}
// child component html
// *ngIf needs only if listening for changing
// of childdata in child component
<div *ngIf="childdata">
<div *ngFor="let spot of childdata" >
{{ spot.id }} --- {{ spot.name }} <!-- Works fine -->
</div>
</div>
Instead of @Input() childData
to @Input() set childData
will work. 代替将
@Input() childData
@Input() set childData
为@Input() set childData
。 This will get the childData to be refreshed on change . 这将使childData 在更改时 刷新 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.