как создать динамическое меню в angular

#angular #typescript #api #web

#angular #typescript #API #веб

Вопрос:

У меня есть такой интерфейс

 export interface INavData {
    name?: string;
    url?: string | any[];
    icon?: string;
  
}

и я устанавливаю данные для этого интерфейса следующим образом

 export const navItems: INavData[] = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer'
  },
  {
    name: 'Colors',
    url: '/Category/subcategory',
    icon: 'icon-drop'
  },
  {
    name: 'Typography',
    url: '/Category/category',
    icon: 'icon-user'
  }
}

У меня есть таблица меню в базе данных со следующими столбцами
1.Name
2.Url
3. Значок
Я возвращаю данные этой таблицы с помощью API.
Теперь, как получить данные из API для этого интерфейса
, можете ли вы помочь мне, друзья
, большое спасибо

Примечание: я получаю данные в сервисе следующим образом:

 export class myService {
  readonly BaseURI = 'http://localhost:542213/api';
 constructor(private http: HttpClient) { }
 getMenus()
  {
    return this.http.get<Menus[]>(this.BaseURI   '/Menus');
  }
}

Я хочу динамически получать имя, URL, значения значков из API, что мне делать, друзья

1. Итак, вы можете подписаться на getMenus() метод, поскольку он возвращает наблюдаемый объект, который предоставляет вам данные меню

2. @SivakumarTadisetti как получить данные getMenus() в интерфейсе MenuItems?

3. get getMenus() data into MenuItems Interface что значит? можете ли вы объяснить это лучше?

4. @SivakumarTadisetti Я установил данные в navItems: INavData[] статически, теперь, как динамически устанавливать navItems: INavData[] из API, пожалуйста, посмотрите мой вопрос еще раз, вы найдете пример navItems: INavData[] подробнее

5. @SivakumarTadisetti Я статически установил значения в navItems: INavData[] теперь, как получить эти значения из API, пожалуйста, снова посмотрите Пример navItems: INavData[] в моем вопросе

Ответ №1:

вы можете получить данные из api в свой файл .ts, используя метод подписки, подобный этому…

.ts

  import {myService} from 'PRTH';

 constructor(private _myService: myService)

 ngOnInit() {
   this.getMenuData()
 }

getMenuData(){
   this._myService.getMenus().subscribe((res)=>{
    console.log(res);             <-- this is your api Data
 });
}

теперь вы можете получать данные API в свою консоль….

1. да, я могу получить данные в свой ts-файл, как в вашем примере, теперь как установить эти данные в интерфейсе элементов меню

2. Как получить данные getMenus() в интерфейс navItems???

3. вы можете установить данные, которые вы получаете от form api, в свой интерфейс

4. Как получить данные getMenus() в интерфейс navItems??? , Это были мои настоящие проблемы, если вы скажете мне об этом, я хочу, чтобы ваш ответ был правильным, а также я дам 1

5. Я установил значения в navItems: INavData[] статически, теперь, как получить эти значения из API, пожалуйста, снова посмотрите Пример navItems: INavData[] в моем вопросе