angular - 从 Java HashMap 显示 Angular 下拉列表

Question

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

Spring 代码:

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

Angular 服务:

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

Angular 分量:

gateways: ContractGatewaysList[];

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

接口(interface):

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)

Answer 1

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

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

与其将此视为与“Angular”相关的问题，我建议确认服务器实际上返回了具有键值对的正确 JSON 对象。

1. 在查看 Angular/客户端代码之前，请确保服务器端按预期返回数据。使用 Chrome 或 REST API 客户端(如 Postman)直接访问 spring boot REST API .

2. 如果您看到错误，请检查服务器端 (Java/Spring) 日志/异常。

3. Here is an example关于如何将 Java map 对象转换为客户端可以使用的 JSON 数据。与 Spring 框架一样，有多种方法，所以请检查 official documentation了解详情。

4. 一旦确认服务器端代码按预期工作，那么集成 Angular 代码应该会更容易。

希望这对您有所帮助。祝你好运!