将数据推入对象时出现Angular 4错误

Question

I need to merge/push data into object.
My code is:

export class HeaderComponent implements OnInit {
  site_heading = "Business Casual";
  menubar = [];
  isLogged = true;
  constructor() {
    this.menubar = [{
      'link': 'home',
      'name': 'Home'
    }, {
      'link': 'about',
      'name': 'About'
    }, {
      'link': 'store',
      'name': 'Store'
    }, {
      'link': 'products',
      'name': 'Products'
    }];
    let userMenu = [{
      'link': 'myprofile',
      'name': 'My Profile'
    }, {
      'link': 'logout',
      'name': 'LogOut'
    }];
    userMenu.forEach(function(value) {
      this.menubar.push(value);
    });
  }
  ngOnInit() {}
}

Its showing error:

ERROR TypeError: Cannot read property 'menubar' of undefined

Answer 1

You need to use an arrow funciton instead of a regular function, to ensure this context is OK:

...
userMenu.forEach((value) => {
    this.menubar.push(value);
});
...

Answer 2

This should work:

let self = this
userMenu.forEach(function (value) {
    self.menubar.push(value);
});

Or lambda expressions (arrow functions)

Answer 3

Use an arrow function,

Arrow function is anonymous and doesn't bind its own this. Hence, this is this of current context.

userMenu.forEach((value) => {
    this.menubar.push(value);
});