Пустой массив при передаче его в компонент (вход)

Question

Я создаю несколько массивов с результатом запроса API. Вот мой метод компонента, который вызывается при нажатии кнопки.

ngOnInit() {


  // GetListeAnomalies(start_date : string, end_date : string) -> return an array
  this.servicePS.getListeAnomalies("2019-10-08", "2019-10-08").then(
    (anomalies : any) => {

      for (let anomalie of anomalies){

        switch (anomalie.type_anomalie) {

          case "erreur_deltaT_recurrent": {
            this.tab_delta_T_recurrent.push(anomalie);
            break;
          }


          case "erreur_absence_emission": {
            this.tab_absence_emission.push(anomalie);
            break;
          }

          case "erreur_delta_T_trop_grand":{
            this.tab_deltaT_trop_grand.push(anomalie);
            break;
          }

          case "erreur_capteur_batterie_faible":{
            this.tab_capteur_batterie_faible.push(anomalie);
            break;
          }

          case "erreur_device_a_remplacer_grande_derive":{
            this.tab_device_a_remplacer_grande_derive.push(anomalie);
            break;
          }

          default: {
            this.tab_other.push(anomalie)
          }
        }
      }
    }
  )
}

Затем я хочу передать эти массивы в свой компонент с именем 'tableau-anomalies'. Поэтому я использую эту строку:

<app-tableau-anomalies [tabValeurs]="tab_delta_T_recurrent"></app-tableau-anomalies>

В моем компоненте я пытаюсь использовать значение Input, но это неправильно инициализировано. Посмотрите на код моего компонента (и мои комментарии)

export class TableauAnomaliesComponent implements OnInit, OnChanges {

  @Input() tabValeurs: any;  

  constructor() {
  }

  ngOnInit() {

    console.log(this.tabValeurs.length); //Return 0
    console.log(this.tabValeurs); //Return CORRECTLY my array with my data.

    for (let anomalie in this.tabValeurs){
      console.log(anomalie);  //This iteration is not called --> no return, not even 'undefined' is written in the console.
    }
  }
}

РЕДАКТИРОВАТЬ: Извините, я забыл написать эту часть своего кода ... Я тоже пытался с "onChanges".

ngOnChanges(changes: SimpleChanges) {

      if (changes.tabValeurs){

        console.log(this.tabValeurs.length); //Return 0

        for (let anomalie of this.tabValeurs){
          console.log(anomalie);//This iteration is not called --> no return, not even 'undefined' is written in the console.
        }
      }   
  }

Я думаю, что есть решение с чем-то вроде Promise или Subscribe? Но я не знаю, как использовать это в моем случае ... Так вы можете мне помочь? У вас есть идеи по поводу решения?

Заранее спасибо :)

Answer 1

Спасибо за ваши ответы. Я наконец нашел решение:

Я использовал логическое значение:

<app-tableau-anomalies *ngIf="isDataAvailable" [tabValeurs]="tab_delta_T_recurrent"></app-tableau-anomalies>

И это мой файл TS моего родительского компонента

ngOnInit() {

    this.servicePS.getListeAnomalies("2019-10-08", "2019-10-08").then(
      (anomalies : any) => {

        for (let anomalie of anomalies){
         ...
        }
      }
    ).then( 
      () => this.isDataAvailable = true);
  }

Answer 2

Посмотрите на угловые крючки жизненного цикла . Вы пытаетесь получить доступ к tabValeurs в OnInit жизненном цикле. Здесь tabValeurs еще не заселено. Вы можете использовать OnChanges, чтобы искать изменения в своих входах и делать что-то на их основе.

Минимальный пример:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnChanges {
    @Input() tabValeurs: any[] = [];

    ngOnChanges(changes: SimpleChanges) {
        if (changes.tabValeurs) {
            //do something
        }
    }
}

И это хорошая идеяинициализировать переменные массива @Input типа как пустой массив при объявлении. Таким образом, вы можете избежать нулевых проверок в html.

Answer 3

привязки обновляются только при обнаружении изменений. Таким образом, сам массив не изменился. Я думаю, что решение перехватывает изменения @Input с помощью getter и setter

@Input() set tabValeurs (val: any) {
 this._tabValeurs = val;
}

_tabValeurs: any;

Answer 4

Вы должны зарегистрировать свое входное значение в жизненном цикле OnChanges, поскольку вы не можете в жизненном цикле OnInit.

export class TableauAnomaliesComponent implements OnInit, OnChanges {

   ...

   ngOnChanges(changes: SimpleChanges): void {
      // Here
   }

   ...
}

И попытаться зарегистрировать параметр изменений и посмотреть, что у вас внутри.

Было бы также лучше использовать карту вместо for.

О родителе

this.servicePS.getListeAnomalies("2019-10-08", "2019-10-08").then(
(anomalies : any) => {
   anomalies.forEach(anomalie => {
      ...
   })
}

О ребенке

this.tabValeurs.forEach(anomalie => { console.log(anomalie) })

Вы должны проверить больше в здесь