Angular5 - Как передать данные ASYNC от родительского к дочернему компоненту - PullRequest
Новая
       7

Angular5 - Как передать данные ASYNC от родительского к дочернему компоненту

0 голосов
/ 12 мая 2018

Когда я пытаюсь передать данные ASYNC от родительского к дочернему компоненту, я получаю неопределенное сообщение.

Из-за данных ASYNC я полагаю, что данные, поступающие от родителя, еще не связаны с 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
  }

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Вы можете реализовать несколько вариантов, чтобы получить его в работе:

1. Прослушайте изменение @Input в вашем дочернем компоненте, используя 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. Использование 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. Сделать дочерний компонент доступным (если это допустимо) только после 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>
0 голосов
/ 12 мая 2018

вместо @Input() childData до @Input() set childData будет работать. При этом childData будет обновлено при изменении .

...