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

由于您无法输入OnInit生命周期，因此应在OnChanges生命周期中记录输入值。

export class TableauAnomaliesComponent implements OnInit, OnChanges {

   ...

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

   ...
}

并尝试记录changes参数并查看其中的内容。

使用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 2

查看angular life cycle hooks。您正在尝试访问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

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

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

_tabValeurs: any;

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

将数组传递到组件时为空数组（输入）

4 个答案: