[Angular] Passare dati remoti a child

[fermat]

ciao!

ho un array di dati, presi da remoto, che mi servono in più componenti.

ho pensato di prendere questi dati nel padre generale:

 ngOnInit(): void {
    this.articoliSerivce.getFeeds()
        .subscribe((res) => {
          this.feeds = [...res.data];
        });
  }

qui i dati in console si vedono correttamente.

e poi passarli ai figli; ad esempio:

<div class="layout-container" [ngClass]="containerClass">
  <app-sidebar [feeds]="feeds"></app-sidebar>
  <div class="layout-content-wrapper">
    <app-topbar></app-topbar>
    <app-breadcrumb class="content-breadcrumb"></app-breadcrumb>
    <div class="layout-content">
      <router-outlet></router-outlet>
    </div>
  </div>
  <app-profilemenu></app-profilemenu>
  <!--<app-config></app-config>-->
  <div class="layout-mask"></div>
</div>


<p-toast key="tst" position="top-center"></p-toast>

dove sidebar è questo:

  @Input() feeds: CodiceFeed[]


  ngOnInit(): void {
    console.table(this.feeds);
  }

il problema è che mi esce undefined.
dove sbaglio???

[fermat]

dovrei aver risolto cosi, nel child:

  private childFeeds;


  @Input() set feeds(value) {
    console.log(value);
    this.childFeeds = value.feeds;
  }


  get feeds() {
    return this.childFeeds;
  }


  ngOnInit(): void {
    console.table(this.childFeeds);
  }

[alka]

ho pensato di prendere questi dati nel padre generale: [...]
qui i dati in console si vedono correttamente. [...]
il problema è che mi esce undefined.
dove sbaglio???

Quando viene eseguita l'inizializzazione (OnInit), la proprietà del "componente figlio" viene correttamente inizializzata passando il valore dal "componente padre", se non fosse che quella proprietà è inizialmente undefined anche sul padre, poiché la valorizzazione avviene solo nel momento in cui si effettua la chiamata e per effetto del "subscribe" i valori finiscono nella proprietà, ma anche sul figlio.

In breve, non so qual è il problema che riscontri, ma fare quel console.log() all'interno dell'ngOnInit non ha comunque senso perché i dati arrivano dopo, non solo per il "child" ma anche per il "parent".

[fermat]

eh si infatti avevo capito che il problema era quello.

in teoria come ho fatto dopo avrei risolto, ma sto facendo qualche test!

[alka]

eh si infatti avevo capito che il problema era quello.

Più che "problema", è il comportamento naturale di JavaScript in primis, e di Angular in secondo luogo.

in teoria come ho fatto dopo avrei risolto, ma sto facendo qualche test!

Secondo me non risolve nulla, perché il log presente nell'ngOnInit darà sempre lo stesso risultato; tuttavia, un log con i dati lo vedrai perché hai messo un console.log() anche nel metodo di impostazione dei feeds del controllo figlio.

In breve, il comportamento non è cambiato, ma vedi i dati perché hai messo un log aggiuntivo che prima non c'era; nonostante questo, se la pagina non funzionava per un motivo, questo permane, e se invece funziona, allora funzionava anche prima, perché la tua modifica non cambia la sostanza ma solo l'output sulla console di valori in momenti diversi, del tutto trasparenti rispetto alla dinamica di funzionamento.

[fermat]

Più che "problema", è il comportamento naturale di JavaScript in primis, e di Angular in secondo luogo.


Secondo me non risolve nulla, perché il log presente nell'ngOnInit darà sempre lo stesso risultato; tuttavia, un log con i dati lo vedrai perché hai messo un console.log() anche nel metodo di impostazione dei feeds del controllo figlio.

In breve, il comportamento non è cambiato, ma vedi i dati perché hai messo un log aggiuntivo che prima non c'era; nonostante questo, se la pagina non funzionava per un motivo, questo permane, e se invece funziona, allora funzionava anche prima, perché la tua modifica non cambia la sostanza ma solo l'output sulla console di valori in momenti diversi, del tutto trasparenti rispetto alla dinamica di funzionamento.

no ma infatti hai ragione, non funziona lo stesso.
devo trovare un'altra strada.

[alka]

no ma infatti hai ragione, non funziona lo stesso.
devo trovare un'altra strada.

Ma la domanda è... cos'è che non funziona lo stesso?
In sintesi, cosa succede che è diverso da quello che ti aspetti?

[fermat]

Ma la domanda è... cos'è che non funziona lo stesso?
In sintesi, cosa succede che è diverso da quello che ti aspetti?

allora, direi che rigiro la questione che forse è meglio.

in pratica io ho dei dati che mi arrivano da un web service che dovrei avere in più componenti.
ad esempio nella home e nel menu.
e vorrei evitare di fare due chiamate.
quindi pensavo di prendere i dati nel componente padre "generale" e poi passare questi dati ai figli.

questa è la funzione che ho nel service:

  getFeeds(): Observable<{ data: CodiceFeed[] }> {
    const url = `${this.baseUrl}?controller=articoli&method=getFeeds`;
    return this.http.get(url).pipe(
        map((res: { data: CodiceFeed[] }) => res)
    );
  }

come posso impostare la cosa secondo voi??

[alka]

allora, direi che rigiro la questione che forse è meglio. [...]
quindi pensavo di prendere i dati nel componente padre "generale" e poi passare questi dati ai figli.

Questa era la situazione iniziale, ma non mi pareva di ravvisare un "errore" nell'approccio.

Se tramite Observable ricevi i dati salvandoli in una proprietà di un componente il quale lo passa già a un figlio, non dovrebbero esserci problemi di sorta.

Cos'è che non funzionava?

[fermat]

eh ma come da situazione iniziale al child arriva undefined.

cioè, questo il servizio:

@Injectable({
  providedIn: 'root'
})


export class MpArticoliService {


  baseUrl: string = environment.baseUrlApi;


  constructor(private http: HttpClient) {
  }


  getFeeds(): Observable<{ data: CodiceFeed[] }> {
    const url = `${this.baseUrl}?controller=articoli&method=getFeeds`;
    return this.http.get(url).pipe(
        map((res: { data: CodiceFeed[] }) => res)
    );
  }


}

nel parent prendo i dati così:

 ngOnInit(): void {
    this.articoliSerivce.getFeeds()
        .subscribe((res) => {
          this.feeds = [...res.data];
        });
  }

cosa devo passare al child??
perchè se gli passo this.feeds vedo undefined.
ed il problema penso sia legato al concetto di chiamate asincrone.