Angular 6-ngOnInit中的函数不会触发

Question

My problem is that in setStyle() function, I have the right values for those 2 arrays, but it won't enter on .map . Why is that? Where should I call setStyle() function in order to trigger .map , if not in ngOnInit ?

  ngOnInit() {
      this.existingCustomers = this.trackService.refreshExCusts()
      this.nonExistingCustomers = this.trackService.refreshNonExCusts()
      this.setStyle()
  }

  setStyle() {
    // it enters here
    console.log(this.existingCustomers) // has the right value
    console.log(this.nonExistingCustomers) // has the right value

    this.existingCustomers.map((val) => this.lineStyle.push({ // won't enter here
        "customer": val.customer_name,
        "color": '#000000'
    }))

    this.nonExistingCustomers.map((val) =>  this.lineStyle.push({ // won't enter here
      "customer": val.customer_name,
      "color": '#ff0000'
    }))

    console.log(this.lineStyle) // this is empty
  }

The value of the arrays:

existingCustomers = [{customer_name: "a"}, {customer_name: "b"}]

nonExistingCustomers = [{customer_name: "c"}, {customer_name: "d"}]

Thank you for your time!

Answer 1

The object arrays are defined incorrectly, they should look like below for your code to work:

  existingCustomers = [{ customer_name: "a" }, { customer_name: "b" }];

  nonExistingCustomers = [{ customer_name: "c" }, { customer_name: "d" }];

I tested with these arrays, and I get the lineStyle printed in console as:

[{"customer":"a","color":"#000000"},{"customer":"b","color":"#000000"},{"customer":"c","color":"#ff0000"},{"customer":"d","color":"#ff0000"}]

UPDATE : OP Confirmed that the Array definition was typo in the question. So my only other suspect is how the map or forEach take a callback function and therefore race condition when console.log prints the array. Try the for loops:

  setStyle() {
    // it enters here
    console.log(this.existingCustomers) // has the right value
    console.log(this.nonExistingCustomers) // has the right value

    for (let i = 0; i < this.existingCustomers.length; i++) {
      this.lineStyle.push({ // won't enter here
        "customer": this.existingCustomers[i].customer_name,
        "color": '#000000'
      })
    }

    for (let i = 0; i < this.nonExistingCustomers.length; i++) {
      this.lineStyle.push({ // won't enter here
        "customer": this.nonExistingCustomers[i].customer_name,
        "color": '#ff0000'
      })
    }

    console.log(JSON.stringify(this.lineStyle)) // this is empty
  }

Answer 2

Make sure that you are implementing onInit:

import { OnInit } from '@angular/core';
export class Random implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
     console.log(`OnInit`); 
  }

}