问题描述
限时送ChatGPT账号..我想知道从服务器获得响应后加载表单的最佳方式是什么.我写了一些代码,它从服务器获取数据,在我订阅响应的组件中,但我的 UI 在我得到响应之前就加载了.
我想使用此组件进行添加和编辑.
组件:
@Component({选择器:'门',templateUrl: '/public/app/views/gate.html',指令:[GateFormComponent, StrategyComponent],提供者:[我的服务]})导出类 MyComponent {私人 ID:任何;构造函数(私有_routeParams:RouteParams,@Inject(MyModel)私有myModel,私人我的服务:我的服务){}ngOnInit() {this.id = this._routeParams.get("id");如果(this.id){this.gateDataModel.unique_display_id = parseInt(this.id);this.myService.loadData(this.id).subscribe(response => console.log(response));}}
在我的组件中,我正在加载 2 个组件,其中一个组件有一个表单,一旦我收到响应,我就必须将数据加载到其中.而这一切只有在我有可用的 id 时才会发生.
服务:
@Injectable()导出类 MyService 扩展了 HTTPServices {构造函数(http:Http){超级(http);}加载数据(ID:编号){返回 this.query(url).map(res => res.json()).catch(this.handleError)}私人句柄错误(错误:响应){console.log("错误:", 错误);返回 Observable.throw(error.text());}
HTTP 服务
导出类 HTTPServices {私人标题:标题;私有 http:Http;defaultOptionsArgs:RequestOptionsArgs;构造函数(http:Http){this.http = http;this.headers = new Headers();this.headers.append('Content-Type', 'application/json');this.defaultOptionsArgs = {'标题':this.headers};}创建(服务路径:字符串,模型:任何,选项?:RequestOptionsArgs){var url = this.getUrl(servicePath);var 选项 = 选项 ?选项:this.defaultOptionsArgs;返回 this.http.post(url, JSON.stringify(model), options);}查询(服务路径:字符串,选项?:RequestOptionsArgs){var 选项 = 选项 ?选项:this.defaultOptionsArgs;返回 this.http.get(servicePath, options);}}
----已编辑-----
最后,我能够添加 @CanActivate
并且它正在工作.
@Component({选择器:'门',templateUrl: '/public/app/views/gate.html',指令:[ROUTER_DIRECTIVES、GateFormComponent、StrategyComponent]})@CanActivate((next: ComponentInstruction, prev: ComponentInstruction) =>{返回新的承诺((解决)=> {让 id = next.params["id"];让注入器 = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);让 http = injector.get(Http);如果(ID){http.get(URL).subscribe((响应) => {控制台日志(响应)next.routeData.data["响应"] = 响应;//继续解决(真);}, (错误) =>{解决(假);});} 别的 {解决(真);}});})导出类 MyComponent{私人 ID:任何;构造函数(私有_routeParams:RouteParams,@Inject(MyModel)私有myModel,routeData:RouteData){console.log(routeData.get("response"));}}
组件正在加载,然后我收到响应
谢谢
解决方案在你的组件中你可以直接使用
模板:`<div *ngIf="数据"><!-- 表格在这里-->`
其中 data
是一个属性,当来自服务器的响应到达时设置为某个值.
I'm wondering what is a best way to load a form after getting the response from server. I wrote some code where it is getting data from server and in my component I am subscribing to the response, but My UI is loading before even I get the response.
I want to use this component for both adding and editing.
Component:
@Component({
selector: 'gate',
templateUrl: '/public/app/views/gate.html',
directives: [GateFormComponent, StrategyComponent],
providers : [MyService]
})
export class MyComponent {
private id:any;
constructor(private _routeParams:RouteParams, @Inject(MyModel) private myModel,
private myService : MyService) {
}
ngOnInit() {
this.id = this._routeParams.get("id");
if (this.id) {
this.gateDataModel.unique_display_id = parseInt(this.id);
this.myService.loadData(this.id)
.subscribe(response => console.log(response));
}
}
In my component, I am loading 2 components one of which has a form into which I have to load data once I get the response. And all this should only happen if I have an id available.
Service:
@Injectable()
export class MyService extends HTTPServices {
constructor(http:Http) {
super(http);
}
loadData(id:number) {
return this.query(url)
.map(res => res.json())
.catch(this.handleError)
}
private handleError(error:Response) {
console.log("Error : ", error);
return Observable.throw(error.text());
}
HTTPServices
export class HTTPServices {
private headers:Headers;
private http:Http;
defaultOptionsArgs:RequestOptionsArgs;
constructor(http:Http) {
this.http = http;
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.defaultOptionsArgs = {
'headers': this.headers
};
}
create(servicePath:string, model:any, options?:RequestOptionsArgs) {
var url = this.getUrl(servicePath);
var options = options ? options : this.defaultOptionsArgs;
return this.http.post(url, JSON.stringify(model), options);
}
query(servicePath:string, options?:RequestOptionsArgs) {
var options = options ? options : this.defaultOptionsArgs;
return this.http.get(servicePath, options);
}
}
----Edited-----
Finally, I was able to add @CanActivate
and it is working.
@Component({
selector: 'gate',
templateUrl: '/public/app/views/gate.html',
directives: [ROUTER_DIRECTIVES, GateFormComponent, StrategyComponent]
})
@CanActivate(
(next: ComponentInstruction, prev: ComponentInstruction) => {
return new Promise((resolve) => {
let id = next.params["id"];
let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
let http = injector.get(Http);
if(id){
http.get(URL)
.subscribe((response) => {
console.log(response)
next.routeData.data["response"] = response;
// continue
resolve(true);
}, (error) => {
resolve(false);
});
} else {
resolve(true);
}
});
}
)
export class MyComponent{
private id:any;
constructor(private _routeParams:RouteParams, @Inject(MyModel) private myModel, routeData: RouteData) {
console.log(routeData.get("response"));
}
}
The component is loading up and then I am getting the response
Thanks
解决方案In you component you can just use
template: `
<div *ngIf="data">
<!-- form goes here -->
</div>
`
where data
is a property that is set to some value when the response from the server arrived.
这篇关于在 angular2 中填写 http 响应后的表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论