Angular2 / 4填写表格后请求

时间:2017-06-17 08:29:29

标签: javascript angular typescript

我使用相同的表单进行用户添加和用户编辑。如果用户已登录,我知道我正在编辑表单,如果用户未登录,则添加新用户。 我面临的问题是,当用户登录时,我必须查询后端API以获取用户数据以填充表单,并且由于GET请求是async,因此在获取数据之前已经创建了表单。这就是我所拥有的:

ngOnInit() {

    let userData = null;

    if (this.userService.userId) { // user is logged in, query for data
      this.http.get('http://localhost/api/user/get/' + this.userService.userId)
          .subscribe(
            (data) => {
              userData = data.json();
            },
           (error) => {

           }
      );
    }

//init form
this.form = new FormGroup({
  id: new FormControl(userData ? userData.id : ''),
  name: new FormControl(userData ? userData.name : '', Validators.required)
});

}

我想到的一个解决方案是在获取数据后在get块中复制表单init,但这个剂量似乎是一个很好的解决方案,特别是当表单init可以有很多字段时。

对于这种情况,什么是干净的解决方案?

1 个答案:

答案 0 :(得分:3)

问题的简洁解决方案如下所示 -

    import csv
    with open('bike_results.csv', newline='') as csvfile:
        reader = csv.reader(csvfile, delimiter=' ', quotechar='|')
        for row in reader:
            print(','.join(row))
    bike_list = list(reader)

    sorted(bike_list)

    html_content = "<html><body><table><tr><td>" + bike_list[0][0] + "</td><td>" + bike_list[0][1] + "</td><td>" + bike_list[0][2] + "</td><td>" + bike_list[0][3] + "</td><td>" + bike_list[0][1] + "</td><td>" + bike_list[0][4] + "</td><td>" + bike_list[0][5] + "</td><td>" + bike_list[0][6] + "</td><td>" + bike_list[0][7] + "</td><td>" + bike_list[0][8] + "</td><td>" + bike_list[0][1] + "</td><td>" + bike_list[0][9] + "</td><td>" + bike_list[0][10] + "</td><td>" + bike_list[0][11] + "</td></tr>"
    i=1
    while i < len(bike_list):
        html_content += "<tr><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td></tr>".format(bike_list[i][0],bike_list[i][1],bike_list[i][2],bike_list[i][3],bike_list[i][4],bike_list[i][5],bike_list[i][6],bike_list[i][7],bike_list[i][8],bike_list[i][9],bike_list[i][10],bike_list[i][11])
        i+=1
    html_content += "</table></body></html>"

    import webbrowser

    f = open('bike_results.html','w')

    message = html_content
    f.write(message)
    f.close()

    webbrowser.open_new_tab('bike_results.html')

请注意, ngOnInit() { let userData = null; //init form this.form = new FormGroup({ id: new FormControl(userData ? userData.id : ''), name: new FormControl(userData ? userData.name : '', Validators.required) }); if (this.userService.userId) { // user is logged in, query for data this.http.get('http://localhost/api/user/get/' + this.userService.userId) .subscribe( (data) => { userData = data.json(); this.form.patchValue({ id: userData.id, name: userData.name }) }, (error) => { } ); } } FormGroup请求发送之前已初始化。稍后GET用于将新值绑定到patchValue

希望这有帮助。