Вопрос:

Как правильно перенести данные из httpClient.get в мою локальную переменную

angular observable

21 просмотра

1 ответ

1 Репутация автора

Я написал некоторый код для получения пунктов меню из базы данных в мое угловое приложение. Служба отдыха работает нормально, возвращая следующий результат:

[{"childmenu":"","doktype":1,"id":44,"itemtext":"Yardstickzahlen"},{"childmenu":[{"childmenu":"","doktype":1,"id":47,"itemtext":"Formular"},{"childmenu":"","doktype":1,"id":48,"itemtext":"Ausfüllhilfe"}],"doktype":4,"id":43,"itemtext":"Deklaration"},{"childmenu":[{"childmenu":"","doktype":1,"id":45,"itemtext":"Gruppenbildung"},{"childmenu":"","doktype":1,"id":41,"itemtext":"Proteste"}],"doktype":4,"id":39,"itemtext":"Empfehlungen"},{"childmenu":[{"childmenu":"","doktype":1,"id":49,"itemtext":"Einführung"},{"childmenu":"","doktype":1,"id":40,"itemtext":"Vergütungen"},{"childmenu":"","doktype":1,"id":42,"itemtext":"Abkürzungen"}],"doktype":4,"id":46,"itemtext":"Dokumentation"},{"childmenu":"","doktype":1,"id":50,"itemtext":"Impressum"}]

Вот этот компонент.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs";

import { MenuService} from "../menu.service";
import {MenuItems} from "../models/menu-items";
import { __values } from 'tslib';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  constructor(private _menu : MenuService) { }

  menuPoints : MenuItems[];
  brand :String = "YST Brand";


  ngOnInit() {

this._menu.get()
  .subscribe(data => 
    { console.log("data",data);
      this.menuPoints = __values(data);
      console.log("menu",this.menuPoints);   
    });

}
}

Здесь сервис меню, который возвращает полный ответ с сервера

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";

import { MenuItems} from "./models/menu-items";


@Injectable({
providedIn: 'root'
})
export class MenuService {

constructor(private _http : HttpClient) { }

_url = "http://activity:8080/yardstickservice/rest/api/menu";

public get()  {
  return  this._http.get<MenuItems>(this._url);
}

и вот компонент.html:

<div>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary text-light">
<ul class="navbar-nav">
  <li class="nav-item dropdown" *ngFor="let item of menuPoints">
    <a *ngIf="item.childmenu; else submenu" class="text-light nav-link dropdown-toggle" href="#" data-toggle="dropdown">{{item.itemtext}} </a>
    <ng-template #submenu>
      <!--submenu template-->
      <a  class="text-light nav-link" href="#">{{item.itemtext}}</a>
    </ng-template>
    <div *ngIf="item.childmenu" class="dropdown-menu text-light bg-primary">
        <a *ngFor="let subitem of item.childmenu" class="dropdown-item taxt-light" href="#">{{subitem.itemtext}}</a>
      </div>
  </li> 
</ul>
</nav>

</div>

Это все отлично работает, только 1 раз. Вход в консоль показывает мне, «данные» содержит запрошенные данные. «menuPoints» содержит массив (не знаю, что). Когда я щелкаю пункт меню, я теряю меню, нажатие F5 возвращает его. Я думаю, что я не прав с "__values ​​(данные)". Как я могу получить восстановленные данные?

Автор: Uwe Источник Размещён: 09.08.2019 09:44

Ответы (1)


0 плюса

408 Репутация автора

Это был бы лучший подход:

Сервис: выставить данные как наблюдаемое свойство (ошибка перехвата и переброса, если есть)

export class MenuService {
    menuItems$ = this._http.get<MenuItem[]>(this._url)
       .pipe(
            catchError(err => {
              console.error(err);
              return throwError(err);
             })
         );
    constructor(...

component.ts: (ошибка перехвата и регистрации, если есть)

menuItems$ = this._menuService.menuItems$.pipe(
    catchError(err => {
      this.errorMessage = err;
      return EMPTY;
    })
  );
  constructor(...

component.html: использовать асинхронный канал, чтобы Angular позаботился о подписке / отписке

 *ngFor="let item of menuItems$ | async"
Автор: johey Размещён: 11.08.2019 08:43
Вопросы из категории :
32x32