我有一个名为list
的组件,它将显示 api 中的一些标题名称,如下所示:
如图所示,我将fab-button
称为添加。在单击此fab按钮时。我正在调用一个对话框窗口(组件名称是add-customer)。像这样:
现在从该对话框窗口中,我想填写表单的输入字段(即标题和描述),并希望将其发布到服务器上,这意味着我要在点击时发送http POST
请求
保存按钮。
我可以使用 GET 方法调用api。但是对于 POST 方法,我无法执行。
在add-customer.ts
中,我将表单中的值传递给名为 postCustomer
我可以在控制台中看到它:
我只想知道如何将 postCustomer 函数分配给service.ts
文件中的POST方法。
我正在尝试这样:
public postCustomer(): Promise<IContact[]> {
const apiUrl: string = 'api.........';
return this.http.post<IContact[]>(apiUrl).toPromise();
}
答案 0 :(得分:1)
对于要发送的正文POST
,请将服务更改为:
public postCustomer(data): Promise<IContact[]> {
const apiUrl: string = 'https://jsonplaceholder.typicode.com/posts';
return this.http.post<IContact[]>(apiUrl, data).toPromise();
}
然后在您的AddCustomerComponent
中将方法onAddCustomer()
重构为:
public onAddCustomer(): void {
this.markAsDirty(this.addCusForm);
this.postCustomer=this.addCusForm.value;
console.log(this.postCustomer);
this.service.postCustomer(this.postCustomer).then(
(response)=> {
console.log('POST called', response);
}
)
}
不要忘记将Service
导入同一组件:
import {Service} from '../service';
并将其注入constructor
:
constructor(private fb: FormBuilder, private service: Service) { }
注意::我不明白为什么您在 Promises
上使用 Observables
的原因,您必须对其进行更改,以实现更高的一致性和更强大的运算符。