Question

我是通过[动态菜单核心ui] [1]使我的菜单变成动态的。

这是我的服务课程

import { Injectable } from '@angular/core';
import { HttpClient,HttpParams  } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AuthService } from '../services/auth.service';

import { INavData} from 'src/app/shared/models/Security';
import { Result} from 'src/app/shared/models/Result';

const baseUrl = `${environment.apiUrl}/Menu`;

@Injectable()

export class SidebarService {
  
  items$: Observable<INavData[]>;

  constructor(private httpClient: HttpClient, private authService: AuthService) {
   var user= authService.userValue;
    
   this.items$ = this.getSidebarItems(user.id)
    
  }

private getSidebarItems(userid: number): Observable<INavData[]>   {

      let params = new HttpParams();
      params = params.set('userId', userid.toString());
      var result = this.httpClient.get<INavData[]> (`${baseUrl}/GetMenusByUserId`,{params});
        return result;
  }

}

Api我正在获取数据..但项目未更新

[！[在此处输入图片描述] [2]] [2]

是angular和rxjs的新手。请让我知道为什么项目为null？

这是我的html

 <app-sidebar-nav [navItems]="sidebar.items$ | async" [perfectScrollbar] [disabled]="sidebarMinimized"></app-sidebar-nav>

我的Component类：在这里，iam注入服务$ items并像在html中的上一行一样进行注入。.

import { Component, OnDestroy, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
//import { navItems } from '../../_nav';
import { Router } from '@angular/router';

import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { SidebarService } from 'src/app/core/services/sidebar-service';


@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html'
})
export class LayoutComponent implements OnDestroy {

  public sidebarMinimized = true;
  private changes: MutationObserver;
  public element: HTMLElement;


  constructor(
    private router: Router,
    private authService: AuthService,
    private sidebar: SidebarService,
    
    @Inject(DOCUMENT) _document?: any)
     {  
    
      
      this.changes = new MutationObserver((mutations) => {
        this.sidebarMinimized = _document.body.classList.contains('sidebar-minimized');
      });
      this.element = _document.body;
      this.changes.observe(<Element>this.element, {
        attributes: true,
        attributeFilter: ['class']
      });
    
  }

  ngOnDestroy(): void {
    this.changes.disconnect();
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('/login');
  }
}

Answer 1

尝试从服务文件中调用API，如下所示：-

import { Injectable } from '@angular/core';
import { HttpClient,HttpParams  } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AuthService } from '../services/auth.service';

import { INavData} from 'src/app/shared/models/Security';
import { Result} from 'src/app/shared/models/Result';

const baseUrl = `${environment.apiUrl}/Menu`;

@Injectable()

export class SidebarService {
  constructor(private httpClient: HttpClient) {
  }

getSidebarItems(userid: number): Observable<INavData[]> {
let params = new HttpParams();
params = params.set("userId", userid.toString());
return this.httpClient.get<INavData[]>(
  `${baseUrl}/GetMenusByUserId`,
  { params }
);
}}

必须从组件中这样调用。

items:INavData[] = []
constructor(
private router: Router,
private authService: AuthService,
private sidebar: SidebarService,

@Inject(DOCUMENT) _document?: any)
 {  

  
  this.changes = new MutationObserver((mutations) => {
    this.sidebarMinimized = _document.body.classList.contains('sidebar-minimized');
  });
  this.element = _document.body;
  this.changes.observe(<Element>this.element, {
    attributes: true,
    attributeFilter: ['class']
  });
this._storage.localStorageGet('daimler_user').then((res: any) => {
  this.userdata = JSON.parse(res);
  this.fullName = (this.userdata[0].FullName == '') ? this.userdata[0].UserName : this.userdata[0].FullName;
  this.userid = this.userdata[0].ID;
this.sidebar.getSidebarItems(this.userid).subscribe(res=>{
this.items= res;
});
});

  }

在角度服务中可观察到

1 个答案: