Question

我有一个要填写我的数据库信息的表格。为了做到这一点，我在NgOnInit中创建了一个被调用的方法，但是该方法需要被调用两次才能起作用。
这是方法：

  ngOnInit() {
    this.typeForm = this.formBuilder.group({
      name: [],
      sig: [],
      camp: [],
      stat: [],
      campAt: [],
      campRep: []
    }) 
    this.getData();
  }

  getData(){

   this.getById(100).subscribe(x => this.User = x); 

   this.typeForm = this.formBuilder.group({

    name: [this.User.name],
    sig: [this.User.sig],
    camp: [this.User.camp],
    stat: [this.User.stat],
    campAt: [this.User.campAt],
    campRep: [this.User.campRep]

   })
  };

问题是，当页面加载时，我在控制台中收到以下错误：

无法读取未定义的属性“名称”

但是奇怪的的事情是，如果我创建一个调用getData（）的按钮，则单击该按钮时一切正常。如果我从NgOnInit删除getData（），则必须单击两次所述按钮才能正常工作。星期四，我需要在页面加载后立即填写表格。

这是怎么回事？我该如何解决这个难题？

Answer 1

Subscribe是异步的，getData()中其余的代码在subscribe完成之前被执行。

尝试将代码移到订阅中：

      getData(){

       this.getById(100).subscribe(x => {
         this.User = x;

        this.typeForm = this.formBuilder.group({

          name: [this.User.name],
          sig: [this.User.sig],
          camp: [this.User.camp],
          stat: [this.User.stat],
          campAt: [this.User.campAt],
          campRep: [this.User.campRep]

         });

      }); 


   };

Answer 2

您收到错误：

无法读取未定义的属性“名称”

因为直到您的订阅完成才定义类变量User，所以订阅块下面的代码将不等待订阅完成。

在Subscription的{{1}}下写下所有逻辑。

您可以将this.getById(100)设置为：

getData()

您无需显式设置formControls中的所有值，您可以在FormGroup上使用getData() { this.getById(100).subscribe(x => { this.user = x; this.typeForm.setValue(this.user) }); }来添加值，因为返回数据的结构与表单的结构相同。

（角度6）单击按钮两次以起作用

2 个答案: