Angular 5 Property 'submenu' does not exist on type

Question

I just created the service to generate the "Menu", I used to call the method from components and i add some more menu this is work flow.

Here menu.service.ts file

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Api } from '../_providers/api/api';

@Injectable()
export class MenuService {

    menuLinks = [
        {
            label: "Dashboard",
            details: "12 New Updates",
            routerLink: "dashboard",
            iconType: "pg",
            iconName: "home",
            thumbNailClass: "bg-success"
        },
        {
            label: "Email",
            details: "234 New Emails",
            routerLink: "email/list",
            iconType: "pg",
            iconName: "mail"
        },
         {
            label: "Classroom",
            iconType: "pg",
            iconName: "laptop",
            toggle: "close",
            submenu: [
                {
                    label: "Classroom UI Test",
                    routerLink: "classroom/class",
                    iconType: "letter",
                    iconName: "AC",
                },
                {
                    label: "Grades",
                    routerLink: "classroom/grade-list",
                    iconType: "fa",
                    iconName: "graduation-cap",
                }
            ]
        }]


    private menuList = new BehaviorSubject(this.menuLinks)
    currentMenuList = this.menuList.asObservable();

    constructor(public Api: Api) {
        this.getAllCourse();
    }


    addCourseinMenu(courseInfo) {
        console.log("adding new course");
        this.menuLinks.forEach(function (menuObj) {
            if (menuObj.label === "Classroom") {
                menuObj.submenu.push({
                    label: courseInfo.shortName,
                    routerLink: "classroom/" + courseInfo.courseId,
                    iconType: "letter",
                    iconName: courseInfo.name.slice(0, 2).toUpperCase(),
                })
            }
        })
        this.menuList.next(this.menuLinks);
    }

    getAllCourse() {
        let that = this;
        console.log("checking all course");
        this.Api.getAll('getAllCouseNameandId').subscribe((response) => {
            const courseInfo: any = response;
            courseInfo.forEach(function (courseObj) {
                let name = courseObj.name;
                that.menuLinks.forEach(function (menuObj) {
                    if (menuObj.label === "Classroom") {
                        menuObj.submenu.push({       //Error Line
                            label: courseObj.shortName,
                            routerLink: "classroom/" + courseObj._id,
                            iconType: "letter",
                            iconName: name.slice(0, 2).toUpperCase(),
                        })
                    }
                })
            })
        })
    }
}

When i run i got this error

Failed to compile.

src/app/_services/menu.service.ts(400,25): error TS2339: Property 'submenu' does not exist on type '{ label: string; details: string; routerLink: string; iconType: string; iconName: string; thumbNa...'. Property 'submenu' does not exist on type '{ label: string; details: string; routerLink: string; iconType: string; iconName: string; thumbNa...'. src/app/_services/menu.service.ts(420,33): error TS2339: Property 'submenu' does not exist on type '{ label: string; details: string; routerLink: string; iconType: string; iconName: string; thumbNa...'. Property 'submenu' does not exist on type '{ label: string; details: string; routerLink: string; iconType: string; iconName: string; thumbNa...'.

Answer 1

use fat array => instead of function for this

  getAllCourse() {
    let that = this;
    console.log("checking all course");
    this.Api.getAll('getAllCouseNameandId').subscribe((response) => {
      const courseInfo: any = response;
      courseInfo.forEach((courseObj:any) {
        let name = courseObj.name;
        this.menuLinks.forEach((menuObj:any) {
          if (menuObj.label === "Classroom") {
            menuObj.submenu.push({       //Error Line
              label: courseObj.shortName,
              routerLink: "classroom/" + courseObj._id,
              iconType: "letter",
              iconName: name.slice(0, 2).toUpperCase(),
            })
          }
        })
      })
    })
  }