Javascript 如何在组件中显示post请求的结果
在我的Angular应用程序中,我试图在另一个组件(即确认页面)中显示post请求的结果。我想知道什么是最好的方法。在我的组件中,代码执行一个post请求,该请求向服务器进行post,如下所示:Javascript 如何在组件中显示post请求的结果,javascript,angular,Javascript,Angular,在我的Angular应用程序中,我试图在另一个组件(即确认页面)中显示post请求的结果。我想知道什么是最好的方法。在我的组件中,代码执行一个post请求,该请求向服务器进行post,如下所示: import { Component, OnInit } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { FormGroup, FormControl } from '@angula
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { nowService } from '../../services/now.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-service-request',
templateUrl: './service-request.component.html',
styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {
public loading = false;
private customer_id = this.appComponent.customer_id;
serviceForm;
u_destination_country = [
{ value: 'Choose an option' },
{ value: 'United Kingdom', },
{ value: 'United States of America', },
{ value: 'Russia', },
{ value: 'Moscow', },
{ value: 'Africa', },
];
users = [
{ id: 'Select an option', },
{ id: '1', },
{ id: '2', },
{ id: '3', },
];
devices = [
{ id: 'Select an option', },
{ id: '1', },
{ id: '2', },
{ id: '3', },
];
constructor(private service: nowService,
private appComponent: AppComponent,
private router: Router,
private http: HttpClient
) {
}
ngOnInit() {
this.serviceForm = new FormGroup({
customer_id: new FormControl(this.customer_id),
si_id: new FormControl('', Validators.required),
u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
u_short_description: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(5),
Validators.maxLength(80)
])),
u_message_description: new FormControl(''),
});
}
onSubmit() {
this.http.post("/api/inc",
this.serviceForm.value,
{
headers: new HttpHeaders().set("Content-Type", "application/json")
}
).subscribe((response: any) => {
console.log(response);//On success response
this.router.navigate(['/inc/confirmation']);
}, (errorResponse: any) => {
console.log(errorResponse); //On unsuccessful response
});
if(this.serviceForm.invalid) {
this.serviceForm.setErrors({ ...this.serviceForm.errors, 'required': true });
return;
}
}
}
所以我要做的是显示display\u value
的值,它类似于:
result: Array(1)
0:
display_name: "number"
display_value: "INC001"
status: "inserted"
table: "incident"
对于Angular 7.2.0及更高版本: 你可以使用内置的角度路由器。为此,您只需添加两件事 第一步: 更新
this.route.navigate(['/inc/confirmation'])
this.router.navigate(['/inc/confirmation'],{state:{response}})代码>
第二步:
在第二个组件中,您可以通过将其添加到代码中来访问状态
const state = this.router.getCurrentNavigation().extras.state;
this.response = state.response;
constructor(private route: ActivatedRoute){}
...
this.value = this.route.snapshot.queryParamMap.get('value');
然后您可以显示它
对于角度为7及以下的车辆:
第一步:
更新this.route.navigate(['/inc/confirmation'])
this.router.navigate(['/inc/confirmation'],{queryParams:{value:response.result[0]。display_value})代码>
第二步:
在第二个组件中,您可以通过将其添加到代码中来访问状态
const state = this.router.getCurrentNavigation().extras.state;
this.response = state.response;
constructor(private route: ActivatedRoute){}
...
this.value = this.route.snapshot.queryParamMap.get('value');
然后您可以显示它
当您不想使用URL参数时:
您可以使用一个属性创建服务
@Injectable({
providedIn: 'root'
})
export class SharedDataService {
public sharedData;
constructor() {
}
}
然后,您可以在重定向到其他路由之前设置sharedData
constructor(private sharedService: SharedDataService){}
...
this.sharedService.sharedData = response;
this.route.navigate(['/inc/confirmation']);
您可以在第二个组件中获取该数据
constructor(private sharedService: SharedDataService){}
...
this.response = this.sharedService.sharedData;
您可以创建一个服务,它将http.post()
作为Observable
返回。或者通过绑定到HTML
中的@Input
属性。看看这里:您有代码示例吗?您想对第二个组件中的数据做什么?您想修改它们还是只显示结果?只显示:display\u value:“INC001”
所以示例:INC001I找到了另一种方法,我将上载代码。执行步骤1会出现以下错误:“{state:{response:any;};”类型的参数不能分配给“NavigationExtras”类型的参数。Object literal只能指定已知属性,而“NavigationExtras”类型中不存在“state”。您使用的是哪个版本?Angular版本6Oh,这是版本7.2.0中的版本。我有这个信息的更新答案。谢谢,但我需要版本6的解决方案