API REST angular 如何獲取數據

Question

我第一次使用 Angular 時被卡住了。 我想在頁面上顯示的數據來自 REST API。 http://localhost:8080 ' 所以我設法顯示了我可以直接訪問的數據，但不是 href 中的數據。 例如，我想顯示每個“協會”的“ville”。 這是我試過的代碼，一切正常，但不是 {{ville.villeNom}} 感謝您的幫助

組件.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)
      });
  }

}

服務.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>

來自 /associations 的 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;
    });
  }

並從 HTML 和 TS 中刪除(load)和onGetVille 。