Java 将地图从SpringBoot后端发送到Angular View，并将其保存在LocalStorage中

我被任务缠住了。我需要将映射从Spring引导后端发送到Angular应用程序

控制器

@GetMapping("/dict")
    public Map<String, String> getAll(){
        return dictionaryService.getAll();
}

我和Angular没有什么共同点，但我需要这样做。从后端下载的映射必须保存在localStorage中，然后从localStorage中下载，并使用键和视图中显示的值。我不知道怎么做。我的解决方案，我甚至没有坚持在这里，没有起作用。正如我所说，我对Angular不太了解。我请求你的理解。有人能帮我吗？展示解决方案或示例解决方案的方法

---

你好

您在Angular的服务可能是：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class YourService {
  constructor(
      private readonly _http: HttpClient) {
  }
  getDictMap(): Observable<{
    'key',
    'other-key',
  }> {
    return this._http.get<any>('/dict').pipe(
      map(res => res)
    );
  }
}

在角度视图html中：

<div *ngIf="dict">
  <div *ngFor="let elem of dict" class="card">
    {{elem.key}}: {{elem.value}}
  </div>
</div>

{{elem.key}}:{{elem.value}

如果您不知道dict对象的键，您可以在output Observable中插入：

getDictMap(): Observable<object> {

getDictMap（）：可观察{

您需要从控制器发送映射，对吗？请尝试在responseEntityRight中发送它，但不一定它也可以是模型对象。更多内容是关于如何以Angular方式映射类和服务，以便正确阅读。非常感谢您的回答！getDictMap（）：ObservablegetDictMap（）：Observable这个“对象”意味着我需要创建类并声明e.q:dict:Map？不，对象是一个通用对象。如果你知道关键点，你也可以创建一个Angular模型。如果你有很多未知的关键点，使用Observable。它是一个通用类型，就像在Java中一样。好的，我有它。但是现在“This.sub”是什么？我现在如何在html视图中显示它

{
    "key": "Some Value",
    "other-key": "Other Value",
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class YourService {
  constructor(
      private readonly _http: HttpClient) {
  }
  getDictMap(): Observable<{
    'key',
    'other-key',
  }> {
    return this._http.get<any>('/dict').pipe(
      map(res => res)
    );
  }
}

import {Component, OnInit, OnDestroy} from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent implements OnInit, OnDestroy {
  private sub: Subscription;
  public dict: {key, value}[];

  constructor(private yourService: YourService) {}

  ngOnInit() {
    this.sub = this.yourService.getDict().subscribe({
      next: res => {
        this.dict = Object.entries(res).map(([k, v]) => {
          return {key: k, value: v};
        });
        localStorage.setItem('dict', JSON.stringify(this.dict));
      },
      error: err => {
        console.error('An error! ', err);
      }
    });
  }

  ngOnDestroy() {
    if (this.sub) {
      this.sub.unsubscribe();
    }
  }
}

<div *ngIf="dict">
  <div *ngFor="let elem of dict" class="card">
    {{elem.key}}: {{elem.value}}
  </div>
</div>

getDictMap(): Observable<object> {