为什么在 angular2 中表单不发送 HTTP 请求？

Question

我正在尝试从 Angular 2 中的表单发送 HTTP 请求。我有组件 class、服务 class 和 HTML 页面.在 HTML 页面上，我有 2 个表单，一个用于 GET 请求，另一个用于 Post 请求。单击成功调用服务中的相应方法。控制台日志显示 URL 是正确的 - url=http://localhost:8080/rentapp/policy。 但是，请求没有到达服务器。

如果我使用相同的 HTML 文件而没有 Angular 2 在请求中指定 URL 则发送成功。 具有相同 URL 的 link 也适用于 Angular 2 和 HTML 文件。

所以，组件是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();
}
}

HTML 文件正在创建-policy.component.html:

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

服务文件是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);
}
}

模型文件是policy.ts

export class Policy {
public id: number;
public title: string;
public description: string;

toString(): string {
return this.title + ': ' + this.description;
}
}

Answer 1

您需要编写服务以从 API 和 return 数据获取数据到组件，然后您可以使用该数据在您 html.

中显示

参考 this link 了解更多信息。

Answer 2

Observable 是惰性的。
你需要调用.subscribe()，否则什么也不会发生。

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

为什么在 angular2 中表单不发送 HTTP 请求？

Why a form does not send a HTTP request in angular 2?

html

angular2-forms

angular