Angular 2：可观察订阅未正确读取数据[重复]

Posted 2023-03-13

【中文标题】Angular 2：可观察订阅未正确读取数据[重复]

【英文标题】：Angular 2: Observable subscription not reading data correctly [duplicate]

【发布时间】：2017-12-04 21:44:22

【问题描述】：

我正在尝试从 Angular 2 中的 Observables 提供的订阅选项从 ngrx 存储中获取数据（对象数组）并分配给一个数组，但问题是当我尝试读取数组的内容时。以下是sn-p的代码->

 metaData$: Observable<MetaClassDefinition[]>;
    myArray: MetaClassDefinition[] = [];  

    constructor(private store: Store<fromRoot.State>) 
      this.metaData$ = store.select(fromRoot.getMetadata);
    

    this.metaData$.subscribe(
       data => 
          if (data.length > 0) 
             // Deep copy array
             data.forEach(v => this.myArray.push(...v));
          
       ,
       error =>  console.log(error)
    );

    console.log(this.myArray);  //-------(1)
    console.log(this.myArray.length);   //-------(2)

现在，第一个 console.log 像这样打印对象数组 ->

但是，我们尝试打印第二个 console.log，我得到数组的大小为零。 我在这里有什么遗漏吗？

【问题讨论】：

由于 Observable 是异步的，所以长度为零

【参考方案1】：

这是因为异步操作的时间问题。在订阅中移动控制台语句以查看更多您所期望的内容。

要添加到这个...通过将对象引用记录到控制台...然后稍后打开它...数据已到达此时并出现在调试器中。

立即计算数组计数（在检索数据之前），因为它是一个简单的数字，所以不会重新计算。

【讨论】：

是的，这确实是异步操作的问题。有没有办法解决这个问题并获得所需的输出？谢谢！

是的，正如我上面所说，移动 subscribe 中的控制台语句以查看您所期望的更多内容。

非常感谢您解决了上一个问题，我目前正面临通过 Observables 订阅数据的另一个问题。直到数据被订阅并存储在局部变量（对象数组）中进行显示，同时组件加载并因此不显示任何数据，因为它仍在从后端获取数据。我认为问题在于竞争条件（异步），有什么线索可以解决这个问题吗？

如果这是一个不同的问题，请使用适当的代码发布一个新问题，以便我们查看。谢谢！

【参考方案2】：

尝试打印订阅内部的数组信息。

this.metaData$.subscribe(
       data => 
          if (data.length > 0) 
             // Deep copy array
             data.forEach(v => this.myArray.push(...v));
             //HERE
             console.log(this.myArray);  //-------(1)
             console.log(this.myArray.length);   //-------(2)
            // END  
          
       ,
       error =>  console.log(error)
    );