Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular: Daten aus einer API Abfragen

22.01.2021 (👁10225)


 

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 {

  constructorprivate httpHttpClient  ) { }

  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 { ComponentOnInit } 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

  constructorpublic 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