Angular5 - 如何将 ASYNC 数据从父组件传递到子组件答案

【问题标题】：Angular5 - How to pass ASYNC data from parent to child componentAngular5 - 如何将 ASYNC 数据从父组件传递到子组件
【发布时间】：2018-10-22 14:02:20
【问题描述】：

当我尝试将 ASYNC 数据从父组件传递到子组件时，我收到未定义的消息。

由于 ASYNC 数据，我想来自 parent 的数据尚未绑定到 OnInit。

在 parent.component.html 中：

<my-child [childdata]="parentdata"></my-child>

在 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
  }

在 child.component.html 中：

<button (click)="mycheck()">TEST</button>
<div *ngFor="let spot of childdata | async" >    
    {{ spot.id }} --- {{ spot.name }}     <!-- Works fine -->
</div>

在 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
  }

【问题讨论】：

你有没有像这样console.log(this.childdate)在子组件的ngOnInit中通过控制台尝试过
首先Observable不订阅就不要获取数据。在 OnInit 上记录 this.childdata。让我知道它是否未定义。
console.log(this.childdate)（在 OnInit 中）未定义。
添加 *ngIf 条件。。从父组件获取值后会加载子组件。

标签： angular angular5 google-cloud-firestore

【解决方案1】：

而不是 @Input() childData 到 @Input() set childData 将起作用。这将使 childData 刷新更改。

【讨论】：

【解决方案2】：

你可以实现几个选项来让它工作：

1. 使用ngOnChanges 监听子组件中的@Input 更改：

// child component
export class ChildComponent implements OnInit {
  @Input() childdata;
  ngOnChanges(changes: SimpleChanges) {
    // on loading you can access childdata
    console.log(changes.childdata.currentValue);
  }

2. 在childdata 的子组件中使用set：

// 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. 仅在parentdata 可用后才使子组件可用（如果可以接受）：

父组件html：

<my-child *ngIf="parentDataLoaded" [childdata]="parentdata"></my-child>

在 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;
      });
  }

对于所有选项，我猜想订阅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>

【讨论】：