Angular Добавление пунктов меню в Const

Question

Конструкция 'MENUITEMS' должна быть условно построена на основе значений bool, но когда я пытаюсь получить sh новые значения, я получаю ошибку:

Type '{state: string; имя: строка; тип: строка; } 'отсутствуют следующие свойства из типа' {state: string; имя: строка; тип: строка; значок: строка; дети: {состояние: строка; имя: строка; тип: строка; } []; } ': icon, дети ts (2739)

import { Injectable } from '@angular/core';

export interface ChildrenItems {
    state: string;
    name: string;
    type?: string;
}

export interface Menu {
    state: string;
    name: string;
    type: string;
    icon: string;
    requiredSubscriptions: [],
    children?: ChildrenItems[];
}


const MENUITEMS = [
    {
        state: 'vertical',
        name: 'Vertical Menu',
        type: 'button',
        icon: ''
    },
    {
        name: 'General',
        type: 'sub',
        class: 'group-title',
        icon: '',
        children: [
            {
                state: 'horizontal/dashboard',
                name: 'DASHBOARD',
                type: 'subChild',
                icon: 'explore',
                children: [
                    { state: 'mail', name: 'MAILROOM', type: 'link' },
                    { state: 'inventory', name: 'INVENTORY', type: 'link' }
                ]
            }
        ]
    }
]

if (this.isMailroomAdmin) {
    MENUITEMS.push(
        {
            state: 'horizontal/mail',
            name: 'MAILROOM',
            type: 'subChild',
            icon: 'envelope',
            label: 'New',
            children: [
                { state: 'addmail', name: 'Add Mail', type: 'link' },
                { state: 'removemail', name: 'Remove Mail', type: 'link' }
            ]
        }
    )
}

if (this.isInventoryAdmin) {
    MENUITEMS.push(
        {
            state: 'horizontal/inventory',
            name: 'INVENTORY',
            type: 'subChild',
            icon: 'carton',
            label: 'New',
            children: [
                { state: 'addinventory', name: 'Add Inventory', type: 'link' },
                { state: 'removeinventory', name: 'Remove Inventory', type: 'link' }
            ]
        }
    )
}

@Injectable()
export class HorizontalMenuItems {
    getAll() {
        return MENUITEMS;
    }
}

Answer 1

Сначала вы должны пометить MENUITEMS как Menu:

const MENUITEMS: Menu[] = [...]

Другая проблема заключается в этом элементе, потому что его дочерний массив не имеет той же структуры (кажется, что это массив Menu, а не ChildrenItems ):

    {
        name: 'General',
        type: 'sub',
        class: 'group-title',
        icon: '',
        children: [
            {
                state: 'horizontal/dashboard',
                name: 'DASHBOARD',
                type: 'subChild',
                icon: 'explore',
                children: [
                    { state: 'mail', name: 'MAILROOM', type: 'link' },
                    { state: 'inventory', name: 'INVENTORY', type: 'link' }
                ]
            }
        ]
    }

И третья проблема заключается в том, что у вас есть свойство requiredSubscriptions, которое не помечено как необязательное (с ?), но оно не отображается нигде в ваших MENUITEMS. Или пометьте его как необязательный или добавьте его к каждому элементу в MENUITEMS.