#

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 { BehaviorSubjectObservable } 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";

 

  constructorprivate httpHttpClient  ) { }

 

  getData():Observable<TimeRecord>{

    

    return this.http

    .get<TimeRecord>(this.URL)

    .pipe(

    map((responseTimeRecord=> {

          

           return response ; 

         }

        )

    )

  }

 

}

 

2)    Component.ts

Der Service wird als Parameter im Erstellen des Constructors mit übergeben, und gibt dadurch auch das Datenmodel weiter

constructorpublic 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>

            &nbsp; {{ 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

Mobile

.

0123movie.net