从 Java HashMap 显示 Angular 下拉列表答案

【问题标题】：Display Angular drop down list from Java HashMap从 Java HashMap 显示 Angular 下拉列表
【发布时间】：2018-12-18 13:53:49
【问题描述】：

我想使用来自 Spring 应用程序的 GET 请求在 Angular 应用程序中显示 HashMap。我试过这个：

弹簧代码：

@GetMapping("gateways")
public ResponseEntity<?> getGateways() {
    Map<Integer, String> list = new HashMap<>();
    list.put(1, "Bogus");
    return ok(list.put);
}

角度服务：

getContractGatewaysList(): Observable<Array<ContractGatewaysList>> {
    return this.http.get<Array<ContractGatewaysList>>(environment.api.urls.contracts.getContractGateways);
  }

角度组件：

gateways: ContractGatewaysList[];

this.contractService.getContractGatewaysList()
      .subscribe(value => {
        if (value != null) {
          this.gateways = value;
        }
      });

界面：

export interface ContractGatewaysList {
  id: number;
  name: string;
}

HTML 代码：

<div class="form-group gateway">
    <div class="input-group-prepend">
      <label for="merchant_id">Gateway</label>
    </div>
    <select class="custom-select" name="gateway" [(ngModel)]="contract.gateway" id="gateway" required>
      <option selected>Please Select...</option>
      <option [value]="gateway.id" *ngFor="let gateway of gateways">{{ gateway.name }}</option>
    </select>
  </div>

但我得到空列表。转换 Java Hashmap 并在 Angular 下拉菜单中显示值的正确方法是什么？请给我看一下工作代码示例，因为我遇到了这个问题吗？

我收到此错误：

ERROR Error: Cannot find a differ supporting object '3873648042962238500' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3152)
    at checkAndUpdateDirectiveInline (core.js:9246)
    at checkAndUpdateNodeInline (core.js:10507)
    at checkAndUpdateNode (core.js:10469)
    at debugCheckAndUpdateNode (core.js:11102)
    at debugCheckDirectivesFn (core.js:11062)
    at Object.eval [as updateDirectives] (ContractNewComponent.html:50)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)

【问题讨论】：

在订阅中添加控制台日志并发布结果
在开发工具中我只能看到错误。我更新了帖子。
你能在 Angular 的订阅中得到响应吗？使用 console.log() 检查，如果你得到响应，请评论响应的 JSON 格式。
尝试更改您的后端，而不是 Map 发送您在角度中所期望的相同类型的对象列表。
你能给我看一下代码示例吗？

标签： angular spring typescript angular6

【解决方案1】：

Java/Spring 代码看起来不正确。我想知道 return ok(list.put) 语句是否甚至编译为 put 是一种方法。

您提供的 Error: Cannot find a differ supporting object... 错误是客户端错误，如果根本原因在服务器上（即 REST API 调用），则不会很有用。

我建议不要将其视为与“Angular”相关的问题，而是确认服务器实际上正在返回带有键值对的正确 JSON 对象。

在查看 Angular/客户端代码之前，请确保服务器端按预期返回数据。使用 Chrome 或 Postman 等 REST API 客户端直接访问 Spring Boot REST API。
如果您看到错误，请检查服务器端 (Java/Spring) 日志/异常。
Here is an example 了解如何将 Java 地图对象转换为可供客户端使用的 JSON 数据。与 Spring 框架一样，有多种方法，请查看official documentation 了解详情。
一旦确认服务器端代码按预期工作，那么集成 Angular 代码应该会更容易。

希望这会有所帮助。祝你好运！

【讨论】：

【解决方案2】：

您的回复将类似于：

{1:"Bogus"}

无法将此平面 JSON 映射到 gateways，因为它是数组类型。

解决方案：

1。您需要迭代响应 JSON 并按键获取它的值并将数据推送到 gateways。

for (var key in responseObject) {
  console.log(key, responseObject[key]);
  // here push data `gateways`, you will find lots of tutorial to push data in array
}

您甚至可以拥有var keys = Object.keys(yourobject);，然后您可以迭代此键并从响应对象中获取特定键的值。选择是你的，你需要实现什么。

您可以从 Java/Spring 发送角度兼容的响应，因此如果所有结构和键都有效，它将直接绑定到 gateways。

【讨论】：