Setting and passing array's values into class

Issue

I'm trying to pass children's array values through export class.

My code at tabs.page.ts is:

export class TabsPage {

  navbarData: {
    routeLink: string;
    ionicon: string;
    iconfirst: IconPrefix;
    iconsecond: IconName;
    iconfull: IconProp;
    label: string;
    library: string;
    open: boolean;
    children: string[];
  }[] = [
    {
      routeLink: 'dashboard',
      ionicon: 'apps-sharp',      
      iconfirst: 'fas',
      iconsecond: 'th',
      iconfull: ['fas', 'th'],
      label: 'Main menu',
      library: 'ion',
      open: false,
      children: [{title: 'sub-menu2', url: '/sub-menu2', icon: 'person' }, { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }],
    },
  ]
}

It gives this following error:

Error: src/app/tabs/tabs.page.ts:56:18 - error TS2322: Type '{ title: string; url: string; icon: string; }' is not assignable to type 'string'. 56 children: [{title: 'sub-menu2', url: '/sub-menu2', icon: 'person' }, { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }], ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/tabs/tabs.page.ts:56:76 - error TS2322: Type '{ title: string; url: string; icon: string; }' is not assignable to type 'string'. 56 children: [{title: 'sub-menu2', url: '/sub-menu2', icon: 'person' }, { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }],

Somebody could tell me what is wrong?

Solution

You're trying to assign an array of objects to a property that expects an array of strings. The children property in navbarData is defined as string[], but you've got an array of objects.

You need to change the type of the children property to match the array structure:

export class TabsPage {
  navbarData: {
    routeLink: string;
    ionicon: string;
    iconfirst: IconPrefix;
    iconsecond: IconName;
    iconfull: IconProp;
    label: string;
    library: string;
    open: boolean;
    children: { title: string; url: string; icon: string }[];
  }[] = [
    {
      routeLink: 'dashboard',
      ionicon: 'apps-sharp',
      iconfirst: 'fas',
      iconsecond: 'th',
      iconfull: ['fas', 'th'],
      label: 'Main menu',
      library: 'ion',
      open: false,
      children: [
        { title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
        { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' },
      ],
    },
  ];
}

Answered By - James