为什么不能使用 map() 函数迭代我的模型中的数组答案

【问题标题】：Why Can't Iterate over an array in my model using the map() function为什么不能使用 map() 函数迭代我的模型中的数组
【发布时间】：2019-07-08 20:29:01
【问题描述】：

我有 angular 7 组件，它与模型相关联，并且该模型内部有一个数组，该数组是从服务中填充的。并且它已被填充。

问题是我无法映射数组，尽管它有元素。当我控制台它显示数组有元素。然后我试图控制台 typeOf(array) 它总是给出对象，虽然它是一个数组!!。

我尝试使用this soluation，但也没有用。

请帮忙？

 export class FooModel {  
   foo : Foo  
   bars: Bar[];
 }

export class SomeComponent implements OnInit {
   model: FooModel;

   constructor(private service: ProjectService) {
    this.model = new FooModel();
    this.model.bars = [];
   } 

   ngOnInit() {
     this.service.getFoos().subscribe((result: any) => {
     // data is populated fine
     this.model=  <FooModel>result.data; 
     });

     Console.log(this.model); // the model has data at this point

     const arr = this.model.bars.map(a=> {
        // never comes here
        return a;
     });

     console.log(arr); // nothing is displayed here

    // this works why ??
    const arr2 = [1,2,3].map(s=> {
        return s;
    }
    console.log(arr2); // it displays [1,2,3]
   }
}

【问题讨论】：

看起来this.model 仅在执行subscribe 回调后才被填充，这将使这个问题成为How do I return the response from an asynchronous call? 的一个特例
How do I return the response from an asynchronous call?的可能重复
其他人试图解释的...问题不在于.map，而在于在哪里您拥有.map 代码。它需要在传递给订阅方法的函数体内。否则，您将尝试在响应返回数据之前映射。我有一个图表可以在这里完成这个过程：stackoverflow.com/questions/46769042/…
@DeborahK 当我控制台记录它有数据的模型时，数据就在那里，我的问题是它认为数组是一个对象，尽管它是数组，所以它不能映射它
您能否构建一个简单的堆栈闪电战来演示您的问题？

标签： arrays angular typescript mapping

【解决方案1】：

由于请求是异步的，您可能需要将逻辑放在订阅中，

this.service.getFoos().subscribe((result: any) => {
     // data is populated fine
     this.model=  <FooModel>result.data; 
      const arr = this.model.bars.map(a=> {
        // never comes here
        return a;
     });
     console.log(arr);
});

【讨论】：

模型有数据，我没有这个问题，我的问题是不能映射对象我不知道为什么它认为它是一个数组对象？

【解决方案2】：

订阅是异步的，因此当它仍在工作时，执行堆栈中的下一行操作将在这种情况下执行您在订阅后拥有的地图，同时它仍在后台填充。您可以尝试在另一个生命周期挂钩中进行映射，说 viewChecked 希望它可以工作。 #干杯

【讨论】：

我的问题不在于数据填充，我已经设法获取数据，但我无法映射它
我明白你的意思，所以我认为你应该在 OnInit 方法中填充数据，但在 viewInit 或 viewChecked 方法中映射它。只需实现它们中的任何一个并在方法中进行映射跨度>

【解决方案3】：

请看cmets

 export class FooModel {  
       foo : Foo  
       bars: Bar[];
     }

    export class SomeComponent implements OnInit {
       model: FooModel;

       constructor(private service: ProjectService) {
        this.model = new FooModel();
        this.model.bars = [];
       } 

       ngOnInit() {
         this.service.getFoos().subscribe((result: any) => {
         // data is populated fine
         this.model=  <FooModel>result.data; 
         });
        // the following starts to execute even before the model is populated above.
         const arr = this.model.bars.map(a=> {
            // never comes here because this.model.bars is empty at here and the length is 0 and nothing inside map executes
            return a;
         });

         console.log(arr); // nothing is displayed here because it has nothing inside

        // this works why ?? because you are using on an array which has some items.
        const arr2 = [1,2,3].map(s=> {
            return s;
        }
        console.log(arr2); // it displays [1,2,3]
       }
    }

因此，正如 Sajeetharan 建议的那样，您已将其保留在 subscribe()

【讨论】：