Question

我是角色新手，我无法将数据从数据服务绑定到FormGroup。我能够在视图中访问属性，但在控制器中未定义相同的属性，我尝试创建表单组并设置它的初始表单控件值。

模型

export class Dog {
  constructor(
    id: number,
    name: string,
    age: number
  ) { }
}

服务

getDog(): Promise<Dog> {
  return this.http.get(this.baseUrl + '/api/endpoint').toPromise().then(res.json()); 
}

组件然后我从我的组件中调用此服务，如：

export class DogComponent implements OnInit {
  form: FormGroup;
  dog: Dog;

  constructor(private service: DogService, private fb: FormBuilder) { }

  ngOnInit(): void {
    this.getData();
    this.createForm();
  }

  getData() {
    this.service.getDog().then(res => this.dog = res);
  }

  createForm() {
    this.form = this.fb.group({
      id: [this.dog.id],
      name: [this.dog.name],
      age: [this.dog.age]
    });
  }
}

查看

<form [formGroup]="form">
  <input formControlName="name" />
  <input formControlName="age" />
</form>

我可以设置输入值，如[value] =＆＃34; name＆＃34;但我希望能够在createForm方法中设置它们。任何想法为什么属性可用于视图但不在控制器内

Answer 1

Http调用本质上是异步的。所以你必须在使用那个数据之前等待数据。所以在getDog（）中调用createForm（）方法。然后。我会改变你的代码如下

export class DogComponent implements OnInit {
form: FormGroup;
dog: Dog;

constructor(private service: DogService, private fb: FormBuilder) {}

ngOnInit(): void {

    this.form = this.fb.group({
        id: [""],
        name: [""],
        age: [""]
    });
    this.getData();

}

getData() {
    this.service.getDog().then(res => {
        this.dog = res;
        this.createForm();
    });
}

createForm() {
    this.form.setValue({
        id: this.dog.id,
        name: this.dog.name,
        age: this.dog.age
    });

}
}

代码未经过测试...希望这有助于理解概念

Answer 2

它们是null，因为获取数据的承诺尚未完成。在getData中执行此操作：

  getData() {
    this.service.getDog().then(res => {
      this.dog = res;
      this.createForm();
    });
  }

无法访问控制器

2 个答案: