Bonjour à tous,

Je suis débutant en Angular 6 et je rencontre un problème sur deux requêtes vers deux API distinctes.
Je dois afficher dans un component le résultat des deux API.

Chaque requête me retourne juste un nombre (SELECT count(*) .......)

Dans mon app.component.ts

  userNbrs = "";
  vehicleNbr = "";

  ngOnInit() {
    this.http.get('http://localhost:4502/api/user').subscribe(response => {
      this.userNbrs = response.json();
    });

    this.http.get('http://localhost:4502/api/vehicle').subscribe(response => {
      this.vehicleNbr = response.json();
    });
  }

Dans mon app.component.html

C'est ici ou je n'arrive pas a intégrer le résultat de la seconde requête.
  <app-menu-left *ngFor="let userItem of userNbrs"
                [itemUserNbrs]="userItem.USERS_NBR"></app-menu-left>

Dans mon menu-left.component.ts

  @Input() itemUserNbrs: string;
  @Input() itemVehicleNbrs: string;

Dans mon menu-left.component.html

	<li>
        <a href="cars">
            <i class="fa fa-car"></i> <span>Cars</span> 
            <span class="pull-right-container">
                <small class="label pull-right bg-green">{{ itemVehicleNbrs }}</small>
            </span>
        </a>
    </li>
    <li>
        <a href="users">
            <i class="fa fa-group"></i> <span>Users</span>
            <span class="pull-right-container">
                <small class="label pull-right bg-yellow">{{ itemUserNbrs }}</small>
            </span>
        </a>
    </li>

Comment puis-je faire pour récupérer la seconde requète ?

Je n'utilise peut-être pas la bonne méthode ?

Merci de votre aide.

Je me réponds à moi-même

Je suis passé par un objet.

Dans mon app.component.ts

objItem = {};

ngOnInit() {
    this.http.get('http://localhost:4502/api/user').subscribe(response => {
      this.userNbrs = response.json();
     this.objItem['USERS_NBR'] = this.userNbrs[0]['USERS_NBR'];
    });

    this.http.get('http://localhost:4502/api/vehicle').subscribe(response => {
      this.vehicleNbr = response.json();
      this.objItem['VEHICLES_NBR'] = this.vehicleNbr[0]['VEHICLES_NBR'];
    });
  }

Dans mon app.component.html

<app-menu-left [itemUserNbrs]="objItem.USERS_NBR"
                [itemVehicleNbrs]="objItem.VEHICLES_NBR"></app-menu-left>

-
Edité par DorBin1528 6 septembre 2018 à 9:59:19

Salut,

Le plus simple je pense serait d'utiliser forkJoin qui te permet de réunir tes requêtes pour n'avoir qu'un seul observable.

forkJoin(
  this.http.get('api1'),
  this.http.get('api2'),
).subscribe(([res1, res2]) => {
  this.objItem = {
    userNumber: res1,
    vehicleNumber: res2
  };
})

A adapter avec tes besoins

Merci 7umpy pour ta solution, je ne connaissais pas forkjoin.

Je vais tester cela dès lundi.

Merci.

Bon weekend.