Verwenden von Daten-Models in Angular Interface statt Class
Typescript Model Service Component Html
Wie verwendet man Daten Models in Angular oder Vue.js ?
Wenn man eine Web Api von Asp.Net Core oder anderen
Datenbanken an ein Angular Frontend anbindet, dann sucht man als C# Entwickler
vergeblich nach dem Datenmodell.
Typescript verwendet eigentlich keine Datenmodels.
Wenn man aber dennoch für Intellisense Datenmodelle einfügen
möchte, dann kann man diese als Interface deklarieren.
Dadurch wird eine Struktur für Intellisense möglichst in
allen .ts Dateien ermöglicht.
Sobald aber die Daten vom httpClient aus einer Web Schnittstelle
geholt werden, findet kein Datenmodel in der .html Seite statt. Hier muss man
per Chrome Browser oder Swagger nachprüfen, welche Werte und Variablen wirklich
ankommen.
1)
Daten Model
interface anstatt class
Wenn man ein Daten Model in Angular verwenden möchte, dann kann
man es unter /models/ als .model.ts Typescript Datei anlegen.
Man sollte ein DatenModel nur als interface erstellen und
nicht als class wie in C#.
Dadurch entfällt der Constructor new und die zuweisung von
Werten.
Das Interface hilft nur, dass Intellisense in allen .ts
typescript Dateien vorhanden ist und vielleicht die Programmierung verbessert.
In /models/myData.model.ts
|
export interface TimeRecord {
Project :string ;
Details :string ;
}
|
2) Verwendung im Sevice
Ein übergreifendes Model kann erstellt werden um in einem Service
für andere Componenten zur verfügung zu stehen.
Dabei wird eine Return Ausgabe für andere Componenten in
Form des Models übergeben und steht so auch den Components.ts mit Intellisense
zur Verfügung
|
import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
// import {Http, Response} from "@angular/http";
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { TimeRecord } from '../models/time-records.model';
@Injectable({
providedIn: 'root'
})
export class TimerecordsService {
private URL : string="https://localhost:44388/api/TimeRecords";
constructor( private http: HttpClient ) { }
getData():Observable<TimeRecord>{
return this.http
.get<TimeRecord>(this.URL)
.pipe(
map((response: TimeRecord) => {
return response ;
}
)
)
}
}
|
2)
Component.ts
Der Service wird als Parameter im Erstellen des Constructors
mit übergeben, und gibt dadurch auch das Datenmodel weiter
|
constructor( public timerecordsService:TimerecordsService ) { }
|
Wenn danach eine Methode aus dem Service aufgerufen wird,
wird das Datenmodel überreicht
|
this.timerecordsService.getData()
|
Compontent.ts
3) Ausgabe in component.html
Allerdings steht Intellisense und das Datenmodel nicht in
der .html Seite zur Verfügung
Wichtig:
Hier muss man Json Web Api Variablen in kleinbuchstaben
einfach mit einem Punkt an die Loop-Variable anfügen.
|
<p>List</p>
<ul>
<ng-container *ngFor="let data of listRecords">
<li>
{{ data.project }}
<br>
{{ data.details }}
</li>
</ng-container>
</ul>
<p>End</p>
|
4) Debuggen der Web
Api
Welche Werte kommen dann aus der Web API eigentlich an und
wie kann man diese Auswerten?
Hierzu öffent man die Angular Webseite auf dem Browser.
Dann mit Ctrl+I auf Untersuchen (Entwicklermodus)
Pfad zum Debuggen in
Chrome
Sources->Page->webpack://->.->src->app->components->..component.html
Dann einen Breakpoint auf die *ngFor Zeile setzen und die
Webseite erneut laden
Die Werte findet man dann unter
Scope->local->ctx->ngForOf->
0..n Datensätze
