Question

我有一个表单，并且想在显示后向表单字段添加默认值，所以基本上我有2个函数＃1从后端＃2检索数据显示表单：

person$: any;

ngOnInit() {
  this.getPersonData(123)
  this.buildPersonForm()
}

getPersonData(id: number) {
   this.personService.getDetails(id)
     .subscribe((data) => {
       this.person$ = data
     }
}

buildPersonForm() {

  // Here I want to access this.person$.firstname

  console.log(this.person$.firstname) // undefined
  this.PersonForm = this.fb.group({
     firstname: [null, Validators.required],
  })
}

在html模板中，如果我按如下所示使用它的话：

<input matInput placeholder="Firstname" formControlName="firstname" value="{{person$?.firstname}}">

但是我想知道如何在组件本身内部而不是在html模板中访问它。

Angular CLI: 7.0.2
Node: 10.12.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.2
@angular-devkit/core         7.0.2
@angular-devkit/schematics   7.0.2
@schematics/angular          7.0.2
@schematics/update           0.10.2
rxjs                         6.3.3
typescript                   3.1.3

Answer 1

只需在可观察到的getPersonData完成上调用buildPersonForm

ngOnInit() {
  this.getPersonData(123);
}

getPersonData(id: number) {
   this.personService.getDetails(id)
     .subscribe((data) => {
        this.person$ = data
      },
     null,
      () => this.buildPersonForm()
    }

另一种方式只是在订阅中next方法的正文中使用buildPersonForm

ngOnInit() {
  this.getPersonData(123);
}

getPersonData(id: number) {
   this.personService.getDetails(id)
     .subscribe((data) => {
       this.person$ = data;
       this.buildPersonForm();
     }
}

使用 async / await

的最后一种方法

async ngOnInit() {
  this.person$ = await this.getPersonData(123).toPromise();
  this.buildPersonForm();
}

Answer 2

FormControl会将数组的第一项中的默认值如下所述。

为此，我们可以使用 async / await 。

async ngOnInit() {
    this.person$ = await this.personService.getDetails(id).toPromise();
    this.buildPersonForm();
}

然后我们可以通过“ buildPersonForm（）”方法将值设置为FormControl。

this.PersonForm = this.fb.group({
    firstname: [this.person$.firstname, Validators.required],
})

和html中的 value 绑定不是必需的，如果您已按照说明添加了“ formControlName ”。

<input matInput placeholder="Firstname" formControlName="firstname">

角度，获取承诺值后无法访问其他函数中的值

2 个答案: