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

Verwenden von Daten-Models in Angular Interface statt Class Typescript Model Service Component Html

26.01.2021 (­čĹü551)


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