Question

我正在使用angular 5材质，我有一个包含菜单和子菜单数据的JSON对象。我该怎么办？我可以用type = link或sub显示项目，但我不知道如何显示孩子。我想在点击父项时显示子项。我使用mat-nav-list和mat-list-item来展示他们，但我不知道如何向孩子们展示。

这是对象：

    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;
    children?: ChildrenItems[];
}

const MENUITEMS = [
    {
        state: 'dashboard',
        name: 'Dashboard',
        type: 'link',
        icon: 'dashboard'
    },
    {
        state: 'setting',
        name: 'Settings',
        type: 'sub',
        icon: 'settings',
        children: [
            {
                state: 'station_management',
                name: 'Station Management',
                type: 'parent',
                grand_children: [
                    { state: 'station', name: 'Station' },
                    { state: 'shifts_work', name: 'Shifts Work' },
                    { state: 'fuel_price', name: 'Fule Price' },
                    { state: 'tank_management', name: 'Tank Management' }
                ]
            }
        ]
    }
];

@Injectable()
export class MenuItems {
    getMenuitem(): Menu[] {
        return MENUITEMS;
    }
}

Answer 1

您需要做的就是将子菜单放在容器DIV中，并在单击父菜单图标时展开或折叠容器。这是一个简单的例子 - 你可能想要以不同的方式实现，但想法是一样的。

   package ie.app.barbershop;

import android.database.sqlite.SQLiteOpenHelper;
import android.content.Context;
import android.database.sqlite.SQLiteDatabase;



public class DatabaseHandler extends SQLiteOpenHelper {
    private static final int DATABASE_VERSION = 1;
    protected static final String DATABASE_NAME = "AppointmentDatabase";

    public DatabaseHandler(Context context) {
        super(context, DATABASE_NAME, null, DATABASE_VERSION);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {

        String sql = "CREATE TABLE appointments " +
                "( id INTEGER PRIMARY KEY AUTOINCREMENT, " +
                "fullname TEXT, " +
                "contactno NUMBER ) ";

        db.execSQL(sql);

    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

        String sql = "DROP TABLE IF EXISTS students";
        db.execSQL(sql);

        onCreate(db);
    }
}

如何使用角度5创建具有子菜单的菜单

1 个答案: