Wenn man Daten aus einer ASP.Net Core Anwendung oder von Azure abfragen möchte, dann muss man einen Angular.Service erstellen, welcher mit einem HttpClient die Daten in ein Angular Daten Observable speichert.
1: Angular Service erstellen
ng generate service services/timerecords |
Register in app.module.ts
import {TimerecordsService } from "./services/timerecords.service"; .. providers: [TimerecordsService], |
HttpClient und Observable Service
Dann in dem Service-Datei einen HttpClient und ein Observable oder BehavirSubject erstellen, und die Daten mit getData() abholen von der API Adress
import { Injectable } from '@angular/core'; import { HttpClient } from "@angular/common/http"; import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' }) export class TimerecordsService {
constructor( private http: HttpClient ) { } public TimeRecordBS=new BehaviorSubject<Object>(null);
getData(){ return this.http.get("https://localhost:44388/api/TimeRecords") }
} |
Daten anzeigen
Anzeige Componente.ts
In der Anzeige Componente, hier eine Liste, muss man in der .component.ts die den Daten-Service anbinden und von der API laden
1) Service anbinden mit .subscribe
this.timerecordsService.getData().subscribe( |
2) Daten abholen oder an die Variable binden
//*fill local Observable this.timerecordsService.TimeRecordBS.next(timerecords); |
3) Daten an das Model Datenbank der Componente übergeben
//*connect to local Angular Model Database this.timerecords=this.timerecordsService.TimeRecordBS; |
Anzeige Componente.ts
list-time-records.component
import { Component, OnInit } from '@angular/core'; import { TimerecordsService } from "../../services/timerecords.service";
@Component({ selector: 'app-list-time-records', templateUrl: './list-time-records.component.html', styleUrls: ['./list-time-records.component.css'] }) export class ListTimeRecordsComponent implements OnInit {
timerecords:any; constructor( public timerecordsService:TimerecordsService ) { }
ngOnInit(): void { //----< ngOnInit() >---- //*getData from Web API this.timerecordsService.getData().subscribe( timerecords=>{ //*fill local Observable this.timerecordsService.TimeRecordBS.next(timerecords); //*connect to local Angular Model Database this.timerecords=this.timerecordsService.TimeRecordBS; //----</ ngOnInit() >---- } ) }
} |
Ausgabe .html
Dien Anzeige componente.html benötigt dann nur ein *ngFor als Schleife
<p>List</p> <ul> <ng-container *ngFor="let timerecord of timerecords?.value"> <li> {{ timerecords }}
</li> </ng-container>
</ul> <p>End</p> |
Ansicht Ergebnis in Browser