将 Map 从 SpringBoot 后端发送到 Angular View 并将其保存在 LocalStorage

Question

我被困在任务上。我需要将 Map 从 Spring Boot 后端发送到 Angular 应用程序。

控制器

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

@Entity
public class Entity {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    @Column(name = "key")
    private String key;
    @Column(name = "value")
    private String value;

public class Model {

    private Map<String, String> dict;

    public Map<String, String> getDict() {
        return dict;
    }

    public Model setDict(Map<String, String> dict) {
        this.dict = dict;
        return this;
    }
}

服务

public Map<String, String> getAll() {
       
        var model = new DictionaryModel()
                .setDictionary(StreamSupport.stream(dictionaryRepository.findAll().spliterator(), false)
                .collect(Collectors.toMap(DictionaryEntity::getKey, DictionaryEntity::getValue)));

        return model.getDictionary();
    }

在邮递员中我有：

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

我与 Angular 几乎没有共同之处，但我需要这样做。从后端下载的地图必须保存在localStorage中，然后从视图中显示的key和value取的localstorage下载。我不知道该怎么做。我的解决方案，即使在这里我也不坚持，但没有奏效。正如我所说，我对 Angular 了解不多。我请求你的理解。有人可以帮帮我吗？显示解决方案或示例解决方案的方法。

您好！

Answer 1

您在 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)
    );
  }
}

并且在您的组件中，您可以将其存储在 localStorage 中：

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();
    }
  }
}

在 Angular 视图 html 中：

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

如果你不知道你的 dict 对象的键，你可以在输出 Observable 中插入：

getDictMap(): Observable<object> {