在 angular2 中填写 http 响应后的表单 [英] Fill form after http response in angular2

问题描述

我想知道从服务器获得响应后加载表单的最佳方式是什么.我写了一些代码，它从服务器获取数据，在我订阅响应的组件中，但我的 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屋！