API REST angular как получить данные

Question

В первый раз я использую Angular, и я застрял. Данные, которые я хочу показать на странице, получены из REST API. 'http://localhost: 8080 ' Так что мне удалось показать данные, к которым я могу получить прямой доступ, но не те, что в href. например, я хочу показать «ville» каждой «ассоциации». вот код, который я попробовал, все работает, но не {{ville.villeNom}} спасибо за вашу помощь

component.ts:

import { Component, OnInit } from '@angular/core';
import {ServicesService} from '../services.service';

@Component({
  selector: 'app-acceuil',
  templateUrl: './acceuil.component.html',
  styleUrls: ['./acceuil.component.css']
})
export class AcceuilComponent implements OnInit {
  public assos;
  public ville;
  public currentAssos;


  constructor(public service:ServicesService) { }

  ngOnInit(): void {
    this.service.getAssos()
      .subscribe(data => {
        this.assos = data
      }, (err) => {
        console.log(err)
      });

  }
  public onGetVille(a) {
    this.currentAssos = a;
    this.service.onGetVille(a)
      .subscribe(data => {
        this.ville = data
      }, (err) => {
        console.log(err)
      });
  }

}

services.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ServicesService {
  public host: string = 'http://localhost:8080';

  constructor(private http: HttpClient) {
  }

  public getAssos() {
    return this.http.get(this.host + '/associations');

  }

  onGetVille(id) {    
    return this.http.get(id._links.ville.href);
  }

}

компонент. html:

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul *ngIf="assos" class="list-group">
        <li  *ngFor="let a of assos._embedded.associations"class=" list-group-item l" (load)="onGetVille(a)" >
           {{a.assoId}}   {{a.assoNom}}  {{a.assoMail}} {{a.assoTel}}

        <span *ngIf="ville">
          {{ville.villeNom}}

        </span>
        </li>
      </ul>
    </div>
  </div>
</div>

Результат API из / ассоциаций:

{
  "_embedded" : {
    "associations" : [ {
      "assoId" : 1,
      "assoNom" : "PC Sans Frontieres",
      "assoNumRNA" : "RNAuhzw9t5",
      "assoMail" : "pcsansfrontieres@orange.fr",
      "assoTel" : "0866427026",
      "assoUrl" : "pcsansfrontieres.fr",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/associations/1"
        },
        "association" : {
          "href" : "http://localhost:8080/associations/1"
        },
        "adhesions" : {
          "href" : "http://localhost:8080/associations/1/adhesions"
        },
        "admin" : {
          "href" : "http://localhost:8080/associations/1/admin"
        },
        "offres" : {
          "href" : "http://localhost:8080/associations/1/offres"
        },
        "ville" : {
          "href" : "http://localhost:8080/associations/1/ville"
        },
        "medias" : {
          "href" : "http://localhost:8080/associations/1/medias"
        },
        "references" : {
          "href" : "http://localhost:8080/associations/1/references"
        },
        "dons" : {
          "href" : "http://localhost:8080/associations/1/dons"
        },
        "statut" : {
          "href" : "http://localhost:8080/associations/1/statut"
        },
        "categorie" : {
          "href" : "http://localhost:8080/associations/1/categorie"
        },
        "liensReseau" : {
          "href" : "http://localhost:8080/associations/1/liensReseau"
        }
      }

Answer 1

Попробуйте:

import { combineLatest } from 'rxjs';
import { switchMap } from 'rxjs/operators';
.......
ngOnInit(): void {
    this.service.getAssoc().pipe(
      switchMap(assos => {
        this.assos = assos;
        return combineLatest(
          // spread all of the properties of the array and map them to HTTP calls
          ...assos._embedded.associations.map(property => this.service.onGetVille(property))
       // make sure property is what needs to be sent for this service
        );
      }),
    ).subscribe(data => {
       this.ville = data;
    });
  }

И удалите (load) и onGetVille из HTML и TS.