Angular patchValue 在循环内不起作用。 为什么？

Question

要将我从服务器获取的值设置为用户表单，我使用pathValue方法，但如果我逐行执行此操作，则工作：

    this.userDataForm.patchValue({ 'first_name': userData['first_name'] });
    this.userDataForm.patchValue({ 'last_name': userData['last_name'] });
    this.userDataForm.patchValue({ 'address': userData['address'] });
    this.userDataForm.patchValue({ 'city': userData['city'] });
    this.userDataForm.patchValue({ 'province': userData['province'] });
    this.userDataForm.patchValue({ 'postal_code': userData['postal_code'] });
    this.userDataForm.patchValue({ 'phone': userData['phone'] });
    this.userDataForm.patchValue({ 'birthdate': userData['birthdate'] });
    this.userDataForm.patchValue({ 'card_id': userData['card_id'] });
    this.userDataForm.patchValue({ 'email': userData['email'] });    

但是如果我在forEach中这样做，它就不起作用。 userDataForm是一个FormGroup ：

var items = ['first_name', 'last_name', 'address', 'city', 'province',
      'postal_code', 'phone', 'birthdate', 'card_id', 'email']
    items.forEach(item => {
      this.userDataForm.patchValue({ item: userData[item] });
    })

我不知道为什么会发生这种情况。 任何的想法？

Answer 1

只需从{ item: userData[item] }更改为{ [item]: userData[item] }即可使用计算属性名称：

var items = ['first_name', 'last_name', 'address', 'city', 'province', 'postal_code', 'phone', 'birthdate', 'card_id', 'email']
items.forEach(item => {
  this.userDataForm.patchValue({ [item]: userData[item] });
})

要了解有关计算属性名称的更多信息：-

• http://es6-features.org/#ComputedPropertyNames
• https://tylermcginnis.com/computed-property-names/

虽然您不需要遍历对象的属性来修补表单中的值，但您可以直接将整个对象修补到表单中：-

this.userDataForm.patchValue(userData);

Answer 2

因为item没有解析为迭代器变量，而是作为对象构造中的普通键受到威胁。