从Java HashMap显示Angular下拉列表

Question

我想使用Spring Application的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)

Answer 1

您的回复将类似于：

{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);，然后可以迭代这些键并从响应对象中获取特定键的值。选择是你的，你需要实施什么。

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