将其传递给组件时的空数组（输入）

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 值，但该值未正确初始化。看看我的组件代码（和我的 cmets）

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

查看angular life cycle hooks。您正试图在OnInit 生命周期中访问tabValeurs。这里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 2

只有在检测到更改时才会更新绑定。所以数组本身没有改变我认为解决方案是用getter和setter拦截@Input的变化

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

_tabValeurs: any;

Answer 3

您应该在 OnChanges 生命周期中记录您的 Input 值，因为您不能在 OnInit 生命周期中。

export class TableauAnomaliesComponent implements OnInit, OnChanges {

   ...

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

   ...
}

并尝试记录更改参数并查看您的内容。

使用 map 代替 for 也会更好。

在父级上

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

关于孩子

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

您应该在here查看更多信息

Answer 4

感谢您的回答。我终于找到了解决办法：

我使用了一个布尔值：

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