Add the view to show the list of DZs

Front/skydivelogs-app/src/app/app.module.ts

@@ -8,23 +8,15 @@ import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
 import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
 import { NewJumpComponent } from './new-jump/new-jump.component';
 
+import { ServiceApi } from '../services/serviceApi';
+import { HttpClientModule } from '@angular/common/http';
+
 
 const appRoutes: Routes = [
   { path: 'summary', component: SummaryComponent },
   { path: 'jumpsList', component: ListOfJumpsComponent },
   { path: 'dz', component: ListOfDzsComponent },
   { path: 'newjump', component: NewJumpComponent }
-  // { path: 'hero/:id',      component: HeroDetailComponent },
-  // {
-  //   path: 'heroes',
-  //   component: HeroListComponent,
-  //   data: { title: 'Heroes List' }
-  // },
-  // { path: '',
-  //   redirectTo: '/heroes',
-  //   pathMatch: 'full'
-  // },
-  // { path: '**', component: PageNotFoundComponent }
 ];
 
 
@@ -41,9 +33,10 @@ const appRoutes: Routes = [
       appRoutes,
       { enableTracing: true } // <-- debugging purposes only
     ),
-    BrowserModule
+    BrowserModule,
   ],
-  providers: [],
+  exports: [HttpClientModule],
+  providers: [ServiceApi],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -1,3 +1,11 @@
 <p>
   list-of-dzs works!
 </p>
+
+<table>
+  <tr *ngFor="let dropZone of userObservable | async as 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

@@ -12,16 +12,15 @@ import { ServiceApi } from '../../services/serviceApi';
 export class ListOfDzsComponent implements OnInit {
   public listOfDropZones: Array<DropZoneResp>;
 
-  constructor(private serviceApi: ServiceApi) { }
+  constructor(private serviceApi: ServiceApi) {
+  }
 
   ngOnInit() {
+    this.getListOfDropZones();
   }
 
   getListOfDropZones() {
     this.serviceApi.getListOfDropZones()
-    .subscribe((data: DropZoneResp) => this.listOfDropZones = {
-        heroesUrl: data['heroesUrl'],
-        textfile:  data['textfile']
-    });
+      .subscribe((data: Array<DropZoneResp>) => this.listOfDropZones = data);
   }
 }

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { DropZoneResp } from '../models/dropzone';
 
 @Injectable()
@@ -7,6 +7,12 @@ export class ServiceApi {
   constructor(private http: HttpClient) { }
 
   public getListOfDropZones() {
-      return this.http.get<DropZoneResp>('http://localhost:1234/api/DropZone');
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Access-Control-Allow-Origin': 'https://localhost:44344',
+      })
+    };
+
+    return this.http.get<Array<DropZoneResp>>('https://localhost:44344/api/DropZone', httpOptions);
   }
 }