为什么不能使用map（）函数对模型中的数组进行迭代

Question

i have angular 7 component which is tied to a model and there is an array inside that model, the array was populated from a service. and it's populated.

the problem is i can't map over the array although it has elements there. when i console it it shows the array has element. then i tried to console typeOf(array) it always gives object although it is an array !!.

i tried using this soluation but it didn't help either.

any help please?

 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]
   }
}

Answer 1

As the request is asynchronous, you might need to place the logic within the subscribe,

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

Answer 2

subscription is asynchronous so while it is still working the next line operation in the execution stack will be performed in this case the map you have after the subscription meanwhile it is still being populated in the background. You can try mapping in another life cycle hook say viewChecked hopefully it works. #cheers

Answer 3

Please look at the comments

 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]
       }
    }

So as Sajeetharan suggested, you have keep it inside subscribe()