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