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

我有一个表单，希望在显示后向表单字段添加默认值，因此基本上我有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}}">

---

FormControl将采用数组第一项中的默认值，如下所述

为此，我们可以使用异步/wait

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

然后我们可以在“buildPersonForm（）”方法中设置FormControl的值

如果您已按说明添加“formControlName”，则html中的值绑定不是必需的

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

---

只需调用getPersonData observable complete上的

buildPersonForm

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

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

另一种方法只是subscribe中下一个方法的主体中的

buildPersonForm

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

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

最后一种可以使用异步/等待的方法

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

---

然后您应该在

getPersonData（）

subscription下调用

this.buildPersonForm（）

。我知道我可以在组件本身中添加默认值，但问题是我无法从

getPersonData（）访问检索到的数据。

我在发布问题之前已经尝试过了，但是由于html表单是angular呈现的默认DOM的一部分，因此我也没有定义，我认为angular不会等到

getPersonData（）

完成它的工作，go to

buildPersonForm（）

@mos angular当然不会等待异步调用（这是需要的）。如果您想在异步调用结束时执行某些操作，请在从异步调用获取数据的位置执行

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

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

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