如何在 Angular 9 中传递 Django rest Framework API？答案

【问题标题】：How to pass Django rest Framework API in Angular 9?如何在 Angular 9 中传递 Django rest Framework API？
【发布时间】：2020-07-08 18:52:17
【问题描述】：

我购买了一个 Angular 主题，我使用 Django REST 框架开发了 API，我想在 Angular 主题 menu 中传递我的 API 数据。我设置了所有内容（例如：服务、类、组件、HTML 文件），但我陷入了困境（如何在 Angular 中使用 API）。我在这里提交我的服务代码，请检查，让我知道如何在 Menu 中实现 API。

这是我的 nav.services.ts 文件

import { Injectable, HostListener } from '@angular/core';
import { BehaviorSubject,Observable, of, from } from 'rxjs';
import { GYM } from '../classes/gym';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment';

// Menu
export interface Menu {
path?: string;
title?: string;
type?: string;
megaMenu?: boolean;
image?: string;
active?: boolean;
badge?: boolean;
badgeText?: string;
children?: Menu[];
//childrens?: results[];
}

@Injectable({
providedIn: 'root'
})

export class NavService {

//  constructor() { }

public screenWidth: any;
public leftMenuToggle: boolean = false;
public mainMenuToggle: boolean = false;

// Windows width
@HostListener('window:resize', ['$event'])
onResize(event?) {
    this.screenWidth = window.innerWidth;
}

MENUITEMS: Menu[] = [
    {
        title: 'home', type: 'sub', active: false, children: [
            {
                title: 'clothing', type: 'sub', active: false, children: [
                    { path: '/home/fashion', title: 'fashion-01', type: 'link' },
                ]
            },
            { path: '/home/vegetable', title: 'vegetable', type: 'link' },
        ]
    },
];
  // Array
  items = new BehaviorSubject<Menu[]>(this.MENUITEMS);

我如何在 thi 代码中传递我的数据，因为我在现有主题中获得的这些数据和我的 api URL 是 http://127.0.0.1:8000/category 请让我知道演示代码如何在上面的代码中实现这个 api url。

【问题讨论】：

标签： django angular django-rest-framework angular9

【解决方案1】：

/** GET Menu from the server */
let Url = 'http://127.0.0.1:8000/category'
getMenu(): Observable<Menu[]> {
  return this.http.get<Menu[]>(this.Url)
    .pipe(
      tap(_ => this.log('fetched menu')),
      catchError(this.handleError<Menu[]>('getMenu', []))
    );
}

订阅此方法，您想通过 NavService 实例获取菜单对象

【讨论】：