Warum sendet ein Formular keine HTTP-Anfrage in Winkel 2?

Question

Ich versuche, eine HTTP-Anfrage von einem Formular in Angular 2 zu senden. Ich habe die Komponentenklasse, die Serviceklasse und die HTML-Seite. Auf der HTML-Seite habe ich 2 Formulare, eines für die GET-Anfrage, ein anderes für die Post-Anfrage. Die Klicks rufen die entsprechende Methode im Service erfolgreich auf. Das Konsolenprotokoll zeigt, dass die URL korrekt ist - url = http://localhost:8080/rentapp/policy. Die Anforderung erreicht den Server jedoch nicht.

Wenn ich die gleiche HTML-Datei ohne Angular 2 verwende, wird die URL in der Anfrage erfolgreich gesendet. Der Link mit derselben URL funktioniert auch für Angular 2 und die HTML-Datei.

die Komponente ist also create-policy.component.ts

@Component({ 
selector: 'app-create-policy', 
providers: [CreatepolicyService], 
templateUrl: './create-policy.component.html', 
styleUrls: ['./create-policy.component.css'] 
}) 
export class CreatePolicyComponent implements OnInit { 

policy = Object.assign(new Policy, { 
id: 0, 
title: "", 
description: "" 
}); 

constructor(private policyService: CreatepolicyService) { } 

ngOnInit() { 
} 
onSubmitPostHttp() { 
console.log("Started onSubmitPostHttp policy=" + this.policy); 
this.policyService.addPolicyWithObservable(this.policy); 
} 
onSubmitGetHttp() { 
console.log("Started onSubmitGettHttp policy=" + this.policy); 
this.policyService.getPolicyWithObservable(); 
} 
} 

Die HTML-Datei ist-policy.component.html erstellen:

<div class="container"> 
       <form #f="ngForm" (ngSubmit)="onSubmitPostHttp()"> 
        <p> 
         <label>Policy Title:</label> <input type="text" name="title" 
          [(ngModel)]="policy.title" required> 
        </p> 
        <p> 
         <label>Policy Description:</label> <input type="text" 
          name="description" [(ngModel)]="policy.description"> 
        </p> 
        <p> 
         <button type="submit" [disabled]="!f.valid">Submit</button> 
        </p> 
       </form> 
       <form #f="ngForm" (ngSubmit)="onSubmitGetHttp()"> 
        <p> 
         <button type="submit" [disabled]="!f.valid">Find Policies</button> 
        </p> 
       </form> 
       <a href="http://localhost:8080/rentapp/policy">PolicyGet</a> 
      </div> 

Die Service-Datei ist createpolicy.service .ts:

@Injectable() 
export class CreatepolicyService { 
url = "http://localhost:8080/rentapp/policy"; 
constructor(private http: Http) {} 

public addPolicyWithObservable(policy: Policy): Observable<Policy> { 
const headers = new Headers({'Content-Type': 'application/json'}); 
const options = new RequestOptions({headers: headers}); 
console.log("addPolicyWithObservable policy=" + policy + " url=" + this.url + " http=" + this.http); 
return this.http.post(this.url, policy, options) 
    .map(this.extractData) 
    .catch(this.handleErrorObservable); 
} 

getPolicyWithObservable(): Observable<Policy[]> { 
console.log("getPolicyWithObservable url=" + this.url); 
    return this.http.get(this.url) 
    .map(this.extractData) 
    .catch(this.handleErrorObservable); 
} 

private extractData(res: Response) { 
const body = res.json(); 
return body.data || {}; 
} 
private handleErrorObservable(error: Response | any) { 
console.error(error.message || error); 
return Observable.throw(error.message || error); 
} 
} 

Die Modelldatei ist policy.ts

Answer 1

Observables sind faul.
Sie müssen .subscribe() anrufen, sonst passiert nichts.

this.policyService.addPolicyWithObservable(this.policy).subs‌​cribe(); 

Answer 2

Sie müssen einen Dienst schreiben, um Daten von der API abzurufen und Daten an die Komponente zurückzugeben, und dann können Sie diese Daten verwenden, um sie in Ihrem HTML-Code anzuzeigen.

Siehe this Link für weitere Informationen.