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
