英文:
Angular post request doesn't work correctly
问题
我在Spring中创建了一个简单的后端，其中包含一个用于在数据库中创建新记录的POST请求，并尝试从前端调用它。
我确信后端应用程序正常运行，因为我已经在Postman中进行了测试。
在前端方面，我有一个输入框，用于插入URL，以及一个用于创建新记录的按钮。
我的服务文件中的函数：
addPhoto(url: string) {
console.log('ciaooo');
this.http.post("http://localhost:8080/api/photos/create", {
url: url
})
我的组件：
createPhoto() {
if (!this.formCreate.valid) {
alert("请填写所有必填字段");
} else {
if (this.formCreate.controls['url'].value != null) {
console.log('hhh');
let result = this.tservice.addPhoto(this.formCreate.controls['url'].value);
} else {
console.log('属性为空');
}
}
}
我的HTML：
<form (ngSubmit)="createPhoto()" [formGroup]="formCreate">
<input type="text" formControlName='url'>
<button type="submit">创建</button>
</form>
我在控制台中没有收到错误。但是函数没有产生效果。
英文:
I did a spmple backend in spring with a post that creates a new record in db and I'm trying to call it from frontend.
I'm sure that backend side application works well because I've tested it on postman.
frontend side I have an input where I insert url and a button to create a new record.
My function in service file:
addPhoto(url: string) {
console.log('ciaooo')
this.http.post("http://localhost:8080/api/photos/create", {
url: url
})
My component:
createPhoto() {
if (!this.formCreate.valid) {
alert("compilare tutti i campi obbligatori")
} else {
//console.log(this.formCreate.controls['url'].value)
if (this.formCreate.controls['url'].value != null) {
console.log('hhh')
let result = this.tservice.addPhoto(this.formCreate.controls['url'].value)
}else{
console.log('prop null')
}
}
}
my html:
<form (ngSubmit)="createPhoto()" [formGroup]="formCreate">
<input type="text" formControlName='url'>
<button type="submit">Crea</button>
</form>
I don't receive errors in console. But function hasn't effect
答案1
得分: 1
你需要订阅由http.post返回的Observable。
this.http.post("http://localhost:8080/api/photos/create", {url}).subscribe()
英文:
You need to subscribe to the Observable returned by http.post.
this.http.post("http://localhost:8080/api/photos/create", {url}).subscribe()
答案2
得分: 0
如上所述，您需要订阅post()方法。
为了提供一些上下文：
HttpClient中的post()、get()、delete()等函数是RxJS Observables。Observable是一系列数据流。然而，只有在有人监听它时，这个流才会"流动"。您可以通过调用任何Observable的.subscribe()函数来监听流。
您可以像这样编写您的addPhoto方法：
// 替换 unknown 为从后端返回的正确类型
addPhoto(url: string): Observable<unknown> {
return this.http.post("http://localhost:8080/api/photos/create", {
url: url
})
}
然后在组件中更新您的用法：
createPhoto(): void {
if (!this.formCreate.valid) {
alert("Fill in all mandatory fields");
return;
}
const urlControlValue: string = this.formCreate.controls['url'].value;
if (!urlControlValue) {
return;
}
this.tservice.addPhoto(urlControlValue).subscribe((result: unknown) => console.log('result:', result));
}
英文:
As already mentioned above, you need to subscribe to the post() method.
To give some context:
The post(), get(), delete(), etc functions from the HttpClient are RxJS Observables. An Observable is a stream of data. However, the stream is only "flowing" if there is someone listening to it. You listen to a stream by calling the .subscribe() function of any Observable.
You could write your addPhoto method like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- typescript -->
// Replace unknown with the correct type which is returned from the backend
addPhoto(url: string): Observable<unknown> {
return this.http.post("http://localhost:8080/api/photos/create", {
url: url
})
<!-- end snippet -->
And then update your usage in the component:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- typescript -->
createPhoto(): void {
if (!this.formCreate.valid) {
alert("compilare tutti i campi obbligatori")
return;
}
const urlControlValue: string = this.formCreate.controls['url'].value;
if (!urlControlValue) {
return;
}
this.tservice.addPhoto(urlControlValue).subscribe((result: unknown) => console.log('result: ', result))
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论