web-dev-qa-db-fra.com

Afficher la liste déroulante angulaire de Java HashMap

Je souhaite afficher HashMap dans une application angulaire à l'aide de la requête GET de Spring Application. J'ai essayé ceci:

Code de printemps:

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

Service angulaire:

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

Composante angulaire:

gateways: ContractGatewaysList[];

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

Interface:

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

Code 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>

Mais je reçois une liste vide. Quelle est la bonne façon de convertir le tableau de hachage Java et d’afficher les valeurs dans le menu déroulant Angulaire? Pouvez-vous me montrer un exemple de code de travail, s'il vous plaît parce que je suis coincé avec ce problème?

Je reçois cette erreur:

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)
angularspringtypescriptangular6
6
Peter Penzov

Votre réponse sera quelque chose comme:

{1:"Bogus"}

Il n'est pas possible de mapper ce JSON plat sur gateways car il s'agit d'un type de tableau.

Solution:

1 . Vous devez itérer la réponse JSON, extraire sa valeur par la clé et transmettre les données à 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
}

Vous pouvez même avoir var keys = Object.keys(yourobject);, puis itérer cette clé et obtenir la valeur de la clé spécifique à partir de votre objet réponse . Choice est le vôtre, ce que vous devez implémenter.

  1. Vous pouvez envoyer une réponse compatible angulaire à partir de Java/Spring afin qu’elle se lie directement à gateways si toute la structure et les clés sont valides.
2
user3145373 ツ

Le code Java/Spring semble incorrect. Je me demande si l'instruction return ok(list.put) même compilée en tant que put est une méthode.

L'erreur Error: Cannot find a differ supporting object... que vous avez fournie est une erreur côté client et ne serait pas très utile si la cause première est sur le serveur (c'est-à-dire un appel d'API REST).

Au lieu d’envisager ce problème comme un problème «angulaire», je suggère de confirmer que le serveur renvoie en fait un objet JSON approprié avec des paires clé-valeur.

  1. Assurez-vous que le côté serveur renvoie les données comme prévu AVANT de regarder les codes côté angulaire/client. Accédez directement à l'API REST de démarrage printanier à l'aide de clients Chrome ou d'API REST tels que Postman .

  2. Si vous voyez des erreurs, consultez le journal/les exceptions côté serveur (Java/Spring).

  3. Voici un exemple sur la conversion d'un objet de carte Java en données JSON pouvant être consommées par les clients. Comme avec le framework Spring, il existe de nombreuses façons, consultez la documentation officielle pour plus de détails.

  4. Une fois confirmé que le code côté serveur fonctionne comme prévu, l'intégration du code angulaire devrait être facilitée.

J'espère que cela t'aides. Bonne chance!

3
kctang