Changement pour appeler l'API C# par Angular

+ récupération des datas et leur affichage

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -3,9 +3,8 @@
 </p>
 
 <table>
-  <tr *ngFor="let dropZone of userObservable | async as listOfDropZones; index as i;">
-    <td>{{ dropZone.Id }}</td>
-    <td>{{ dropZone.Name }}</td>
+  <tr *ngFor="let dropZone of this.listOfDropZones; index as i;">
+    <td>{{ dropZone.id }}</td>
+    <td>{{ dropZone.name }}</td>
   </tr>
-
 </table>

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -10,7 +10,7 @@ import { ServiceApi } from '../../services/serviceApi';
 
 
 export class ListOfDzsComponent implements OnInit {
-  public listOfDropZones: Array<DropZoneResp>;
+  public listOfDropZones: Array<DropZoneResp> = new Array<DropZoneResp>();
 
   constructor(private serviceApi: ServiceApi) {
   }
@@ -21,6 +21,6 @@ export class ListOfDzsComponent implements OnInit {
 
   getListOfDropZones() {
     this.serviceApi.getListOfDropZones()
-      .subscribe((data: Array<DropZoneResp>) => this.listOfDropZones = data);
+      .subscribe(data => this.listOfDropZones = data);
   }
 }

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -1,3 +1,10 @@
 <p>
   list-of-jumps works!
 </p>
+
+
+<table>
+  <tr *ngFor="let jump of this.listOfJumps | async; index as i;">
+    <td>{{ jump.id }}</td>
+  </tr>
+</table>

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { JumpResp } from '../../models/jump';
+import { ServiceApi } from '../../services/serviceApi';
 
 @Component({
   selector: 'app-list-of-jumps',
@@ -6,10 +9,17 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./list-of-jumps.component.css']
 })
 export class ListOfJumpsComponent implements OnInit {
+  public listOfJumps: Observable<Array<JumpResp>>;
 
-  constructor() { }
+  constructor(private serviceApi: ServiceApi) {
+  }
 
   ngOnInit() {
+    this.getListOfJumps();
+  }
+
+  getListOfJumps() {
+    this.listOfJumps = this.serviceApi.getListOfJumps();
   }
 
 }

Front/skydivelogs-app/src/services/serviceApi.ts

@@ -1,16 +1,32 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { DropZoneResp } from '../models/dropzone';
+import { JumpResp } from '../models/jump';
+import { Observable } from 'rxjs/Observable';
+import { tap, map } from 'rxjs/operators';
 
 @Injectable()
 export class ServiceApi {
   constructor(private http: HttpClient) { }
 
-  public getListOfDropZones() {
+  public getListOfDropZones(): Observable<Array<DropZoneResp>> {
     const headers = new HttpHeaders({
-      'Access-Control-Allow-Origin': 'https://localhost:44344',
+      'Access-Control-Allow-Origin': 'http://localhost:5000',
     });
 
-    return this.http.get<Array<DropZoneResp>>('https://localhost:44344/api/DropZone', { headers: headers });
+    return this.http.get<Array<DropZoneResp>>('http://localhost:5000/api/DropZone', { headers: headers })
+      .pipe(
+        map(x => x.map(data => new DropZoneResp(data))),
+        // tap(event => console.log(`fetched coinrankings`)),
+        // catchError(this.handleError('getCoinrankings', []))
+      );
+  }
+
+  public getListOfJumps(): Observable<Array<JumpResp>> {
+    const headers = new HttpHeaders({
+      'Access-Control-Allow-Origin': 'http://localhost:5000',
+    });
+
+    return this.http.get<Array<JumpResp>>('http://localhost:5000/api/Jump', { headers: headers });
   }
 }