控制台中的数组不为空，但数组[0]未定义

Question

在我的函数中，我从我的 firestore 数据库中获取数据。 我从“扰动”表和“trajetsFavorite”表中恢复数据。 我想要做的是从干扰集合中检索字段“numero”并将其分配给数组“numeroPertrubationsFavorite”并从集合“trajetsFavorites”中恢复字段“numero”并将其分配给数组“numeroTrajetsFavorite”。 然后我读了我的 2 数组， 如果 2 个字段相等，我将变量“isPerturbationsFavorite”设置为 true。 我尝试了一个这样做的代码，当我制作一个console.log（this.numeroPerturbationsFavorite）时，数据很好地填充到了数组中，对于console.log（this.numeroTrajetsFavorite），数据也显示得很好。 但是，当我执行 console.log (this.numeroPerturbationsFavorites[0].numero，它是未定义的。 有谁能够帮我？我想可能是同步和异步的原因，但我不知道它是如何工作的。

我把我的代码放在这里：

  getPerturbationFavorite(){
        console.log(this.perturbationsBDD); //this is the variable to which i assign the data from the perturbation collection
        console.log(this.trajetFavorisBDD); //this is the variable to which i assign the data from the trajetFavorite collection

        this.numeroPerturbationsFavorite.length = 0;
        this.numeroTrajetFavorite.length = 0;
        this.perturbationsBDD.subscribe((res) => {
          console.log(res);
          for(let i = 0; i < res.length; i++){
            console.log('super' + res[i].numero);
            this.numeroPerturbationsFavorite.push({
              numero : res[i].numero
            });
          }
        })

        this.trajetFavorisBDD.subscribe((res) => {
          for(let i = 0; i < res.length; i++){
            console.log(res[i].numero);
            this.numeroTrajetFavorite.push({
              numero : res[i].numero
            });
          }
        })

        console.log(this.numeroPerturbationsFavorite); // display the data
        console.log(this.numeroTrajetFavorite); // display the data
        console.log(this.numeroTrajetFavorite[0].numero) //display undefined


      for(let i = 0; i < this.numeroPerturbationsFavorite.length; i++){
        console.log(this.numeroPerturbationsFavorite[i].numero); // dont display

        for(let a = 0; a < this.numeroTrajetFavorite.length; a++){
          console.log(this.numeroPerturbationsFavorite[i].numero); // dont display
          console.log(this.numeroTrajetFavorite[i].numero); // dont display
          if(this.numeroPerturbationsFavorite[i].numero === this.numeroTrajetFavorite[a].numero){

            this.isPerturbationsFavorite = true;
            console.log(this.isPerturbationsFavorite); // dont display
          }else{
            this.isPerturbationsFavorite = false;
            console.log(this.isPerturbationsFavorite); // dont display
          }
        }
      }
      }

在这张图片中有错误，在错误的顶部有两个数组结果

Answer 1

请控制台登录订阅块或制作异步功能

 this.trajetFavorisBDD.subscribe((res) => {
    for(let i = 0; i < res.length; i++){
        console.log(res[i].numero);
        this.numeroTrajetFavorite.push({
           numero : res[i].numero
        });
    }
    console.log(this.numeroTrajetFavorite); // display the data
    console.log(this.numeroTrajetFavorite[0].numero)
 })

Answer 2

由于您使用的是 Angular，我强烈建议您使用 RxJS 运算符，它默认安装在 Angular 中。

在您的getPerturbationFavorite 方法中，您需要等待this.perturbationsBDD 和this.trajetFavorisBDD observables 都完成，然后才能执行任何其他相关操作。

您可以为此目的使用combineLatest 运算符，它将发出每个可观察对象的最后一个发出的值。这样后续的值就不会是undefined了。

import { combineLatest } from 'rxjs';

getPerturbationFavorite(){
  this.numeroPerturbationsFavorite.length = 0;
  this.numeroTrajetFavorite.length = 0;

  combineLatest(this.perturbationsBDD, this.trajetFavorisBDD).subscribe([res1, res2] => {
    for(let i = 0; i < res1.length; i++){
      this.numeroPerturbationsFavorite.push({
        numero : res1[i].numero
      });
    }

    for(let i = 0; i < res2.length; i++){
      this.numeroTrajetFavorite.push({
        numero : res2[i].numero
      });
    }

    for(let i = 0; i < this.numeroPerturbationsFavorite.length; i++){
      for(let a = 0; a < this.numeroTrajetFavorite.length; a++) {
        if(this.numeroPerturbationsFavorite[i].numero === this.numeroTrajetFavorite[a].numero) {
          this.isPerturbationsFavorite = true;
        } else {
          this.isPerturbationsFavorite = false;
        }
      }
    }
  });
}

Answer 3

您需要了解异步调用在 Javascript 中的工作原理。

1. 要使for loop 工作，它必须在异步调用完成后执行， 这意味着它必须在 subscribe

的回调中

2. 如果您尝试在subscribe 之外循环，由于在异步调用完成之前numeroPerturbationsFavorite.length 将始终为0，因此将使用no iterations 执行for 循环。

3. 您看到数组显示在console.log(this.numeroTrajetFavorite) 中的原因是，当异步完成后数组的值更改（或设置）时，您的浏览器会立即更新它（iff：数组未展开（查看）由用户在控制台中）

4. 但在 console.log(this.numeroTrajetFavorite[0].numero) 的情况下，浏览器不会更新（或打印）数组项，因为您试图在异步调用完成之前访问数组项。

建议：

将你的 for 循环移动到 subscribe 中，或者创建一个单独的函数并从 subscribe 中调用它

this.trajetFavorisBDD.subscribe(res => {
      for (let i = 0; i < res.length; i++) {
        console.log(res[i].numero);
        this.numeroTrajetFavorite.push({
          numero: res[i].numero
        });
      }
      this.myFunc()
});

myFunc() {
    console.log(this.numeroPerturbationsFavorite); // display the data
    console.log(this.numeroTrajetFavorite); // display the data
    console.log(this.numeroTrajetFavorite[0].numero); //display undefined

    for (let i = 0; i < this.numeroPerturbationsFavorite.length; i++) {
      console.log(this.numeroPerturbationsFavorite[i].numero); // dont display

      for (let a = 0; a < this.numeroTrajetFavorite.length; a++) {
        console.log(this.numeroPerturbationsFavorite[i].numero); // dont display
        console.log(this.numeroTrajetFavorite[i].numero); // dont display
        if (
          this.numeroPerturbationsFavorite[i].numero ===
          this.numeroTrajetFavorite[a].numero
        ) {
          this.isPerturbationsFavorite = true;
          console.log(this.isPerturbationsFavorite); // dont display
        } else {
          this.isPerturbationsFavorite = false;
          console.log(this.isPerturbationsFavorite); // dont display
        }
      }
    }
}