在角度服务中可观察到

ajt 发表于 Dev

Ajt

我正在使我的菜单动态..我指的是 [动态菜单核心 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 的新手。请告诉我为什么项目为空？

这是我的 html

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

我的组件类：在这里我注入服务 $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');
  }
}

米亚斯·穆罕默德

尝试从服务文件中调用 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;
});
});

  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。