从某个函数获取数据并将其用作formModel参数的默认值

Question

在我的Angular组件中，我有

import { NgForm } from '@angular/forms';

export class ProfileComponent implements OnInit {
  userProfile;
  formModel={
    FirstName:"",
    LastName:""
  }

在ngOnInit我有获取数据的功能

  ngOnInit() {
this.service.getUserProfile().subscribe(
  res => {
    this.userProfile = res;

我想要的是使用该数据作为形式模型的默认值。那可能吗 ？如何 ？

Answer 1

ngOnInit() {
this.service.getUserProfile().subscribe(
  res => {
    this.userProfile = res;

在ngOnInit中，您已将响应分配给userProfile。现在您要在模板上显示此数据的内容。所以你可以通过三种方式完成这个特定的过程：

选项1：使用可以打开和关闭的标志

  ngOnInit() {
      this.formReadyFlag = false;
      this.service.getUserProfile().subscribe(
          res => {
             this.userProfile = res;
             this.formReadyFlag = true;
      })
}

相应地，在您的html中，只有在从服务器检索到响应后才会呈现表单。

component.html

<input [(formModel)]="userProfile?.name" *ngIf="formReadyFlag"/>

选项2：确保正在分配的响应具有新参考，以便触发更改检测。

  ngOnInit() {
      this.service.getUserProfile().subscribe(
          res => {
             this.userProfile = {...res};// shallow cloning to ensure a new reference is formed and assigned to the class variable.
      })
}

这个选项对于早期选项来说是一种不那么繁琐的方法。

选项3：使用observable和async管道，这样你就可以编写更少的样板代码，并且所有东西都可以工作。如果你想对响应执行某些操作，则不能使用此方法。

component.ts

    this.userProfile$ = Observable<any> | Subscription<any>;// Depends on the response type of the service method.   
ngOnInit() {
          this.userProfile$ = this.service.getUserProfile();
    }

component.html

<input [(formModel)]="(userProfile | async)?.name"/>