Ich arbeite jetzt schon eine Weile daran und kann scheinbar keine Antwort finden, die klar genug ist, um es zu verstehen. Ich habe eine TestComponent, die ein Array von TestModels von einem Server mit TestService abruft. Wenn ich diese Testmodelle greife, ist es nur eine JSON-Datei, die der Server liest und mit dem richtigen MIME-Typ zurücksendet. Sobald die Testmodelle vom Server geholt wurden, lege ich sie in ein einfaches Auswahlelement-Dropdown-Menü. Wenn ein Testmodell ausgewählt ist, wird das ausgewählte Testmodell in einer verschachtelten Komponente, TestDetailComponent, angezeigt.

Das ist alles schön und gut und funktioniert gut. Ich habe immer wieder Probleme, wenn ich die Daten vom Server hole. Da JavaScript keine Laufzeitüberprüfung hat, können wir den JSON-Code nicht automatisch vom Server in eine Typoskript-Klasse umwandeln, sodass ich manuell eine neue Instanz des TestModels mit dem zurückgegebenen JSON-Code erstellen muss.

Okay also hier ist das Problem. Ich muss new TestModel aufrufen und ihm seine Abhängigkeiten zuweisen, aber es muss eine neue Instanz von TestModel sein. Ich möchte, dass das TestModel in der Lage ist, sich selbst zu speichern und wieder auf den Server zu aktualisieren, damit es eine Abhängigkeit von HTTP von @ angle / core hat und von einer Konfigurationsklasse abhängt, die ich erstellt habe, die Angular mit einem opaqueToken, CONFIG.I, injiziert Ich kann nicht herausfinden, wie ich neue Instanzen von TestModel bekomme. Hier sind die ersten Dateien

TestComponent:

import { Component, OnInit } from '@angular/core';

import { TestService } from './shared/test.service';
import { TestModel } from './shared/test.model';
import { TestDetailComponent } from './test-detail.component';

@Component({
    selector: "test-component",
    templateUrl: 'app/test/test.component.html',
    styleUrls: [],
    providers: [TestService],
    directives: [TestDetailComponent]
})
export class TestComponent implements OnInit {

    tests: TestModel[] = [];
    selectedTest: TestModel;

    constructor(private testService: TestService) {};

    ngOnInit() {
        this.testService.getTestsModels().subscribe( (tests) => {
            console.log(tests);
            this.tests = tests 
        });
    }
}

TestComponent-Vorlage:

<select [(ngModel)]="selectedTest">
    <option *ngFor="let test of tests" [ngValue]="test">{{test.testing}}</option>
</select>
<test-detail *ngIf="selectedTest" [test]="selectedTest"></test-detail>

TestDetailComponent:

import { Component, Input } from '@angular/core';
import { JsonPipe } from '@angular/common';

import { TestModel } from './shared/test.model';

@Component({
    selector: 'test-detail',
    templateUrl: 'app/test/test-detail.component.html',
    pipes: [JsonPipe]
})
export class TestDetailComponent {
    @Input() test;
}

TestDetailComponent template

<p style="font-size: 3em;">{{test | json}}</p>

TestModel

import { Injectable, Inject } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { CONFIG } from './../../config/constants';

@Injectable()
export class TestModel {

    "testing": number;
    "that": string;
    "a": string;

    constructor(private http: Http, @Inject(CONFIG) private config) {}

    save(): Observable<TestModel[]> {

        let url = this.config.apiUrl + "test";
        let body = JSON.stringify({
            testing: this.testing,
            this: this.that,
            a: this.a
        });
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});

        return this.http.post(url, body, options)
                        .map( (response) => response.json() )
                        .map( (results) => {
                            results.map( (aggregate, current) => {
                                aggregate.push(<TestModel>current);
                                return aggregate;
                            }, new Array<TestModel>())
                        }).catch(this.handleError);

    }

    update() {

        let url = this.config.apiUrl + "test";
        let body = JSON.stringify({
            testing: this.testing,
            this: this.that,
            a: this.a
        });
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});

        return this.http.put(url, body, options)
                        .map( (response) => response.json() )
                        .map( (results) => {
                            results.map( (aggregate, current) => {
                                aggregate.push(<TestModel>current);
                                return aggregate;
                            }, new Array<TestModel>())
                        }).catch(this.handleError);

    }

    private handleError(err): Observable<any> {

        let errMessage = err.message ? err.message : err.status ? `${err.status} - ${err.statusText}` : 'Server Error';

        return Observable.throw(new Error(errMessage));

    }

}

Test Service

import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { CONFIG } from './../../config/constants';
import { TestModel } from './test.model';

@Injectable()
export class TestService {

    constructor(private http: Http, @Inject(CONFIG) private config) {}

    getTestsModels(): Observable<TestModel[]> {

        let url = this.config.apiUrl + "test";

        return this.http.get(url)
                        .map( (response) => response.json() )
                        .map( (results) => {
                            return results.map( (current) => {
                                return <TestModel>current; // <<<--- here is the error
                            })
                        })
                        .catch(this.handleError);

    }

    private handleError(err): Observable<any> {

        let errMessage = err.message ? err.message : err.status ? `${err.status} - ${err.statusText}` : 'Server Error';

        return Observable.throw(new Error(errMessage));

    }

}

Ich habe versucht, den ReflectiveInjector zu verwenden, damit TestService folgendermaßen aussieht:

    import { Injectable, Inject, ReflectiveInjector } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { CONFIG } from './../../config/constants';
import { TestModel } from './test.model';

@Injectable()
export class TestService {

    constructor(private http: Http, @Inject(CONFIG) private config) {}

    getTestsModels(): Observable<TestModel[]> {

        let url = this.config.apiUrl + "test";

        return this.http.get(url)
                        .map( (response) => response.json() )
                        .map( (results) => {
                            return results.map( (current) => {
                                return ReflectiveInjector.resolveAndCreate([TestModel]).get(TestModel);
                            })
                        })
                        .catch(this.handleError);

    }

    private handleError(err): Observable<any> {

        let errMessage = err.message ? err.message : err.status ? `${err.status} - ${err.statusText}` : 'Server Error';

        return Observable.throw(new Error(errMessage));

    }

}

Aber dann bekomme ich nur den Fehler:

Wenn ich dann Http zum ReflectiveInjector hinzufüge, erhalte ich nur einen weiteren Verbindungs-Backend-Fehler und gehe davon aus, dass die Abhängigkeitskette so lange bestehen bleibt, bis wir den Grund gefunden haben.

Tut mir leid für den langen Beitrag, jede Hilfe wäre dankbar!