Javascript 使用输入绑定更新类对象

我有一个与组件中的对象绑定的输入列表。我希望能够更改输入框中的值，并使它们在关联对象中更改-目前它们不是

这是我的档案：

home.component.ts

export class HomeComponent implements OnInit, OnDestroy {

  consumerProfile = {
    'firstName': 'Joe',
    'lastName': 'Soap',
    'gender': 'Male',
    'profileCompleteness': 100,
    'profilePicUrl': 'https://www.shareicon.net/data/128x128/2016/09/15/829444_man_512x512.png',
    'contactInfo': {
      'mobile': '0871234567',
      'landline': '018321234',
      'email': 'email@email.com'
    },
    'dateOfBirth': '01/01/1970',
    'address': {
      'country': 'Ireland',
      'city': 'Dublin',
      'addressTwo': 'AddressTwo',
      'postcode': 'D01 1234',
      'county': 'Dublin',
      'addressThree': 'addressThree',
      'addressOne': 'AddressOne`'
    }
  };

  updateConsumer() {
    console.log('Update Consumer');
    console.log(this.consumerProfile); //Object hasn't been updated despite changes to input fields
  }
}

home.component.html

<button class="btn btn-info" *ngIf="isAuthorized" (click)="updateConsumer()">Update Consumer</button>
<br>
<br>
<input type="text" name="profileName" [ngModel]="consumerProfile.firstName"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.lastName"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.gender"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.profilePicUrl"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.profileCompleteness"><br><br>

<input type="text" name="profileName" [ngModel]="consumerProfile.contactInfo.email"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.contactInfo.landline"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.contactInfo.landline"><br><br>

<input type="text" name="profileName" [ngModel]="consumerProfile.dateOfBirth"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.addressOne"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.addressTwo"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.addressThree"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.city"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.county"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.country"><br><br>
<input type="text" name="profileName" [ngModel]="consumerProfile.address.postcode"><br><br>

更新消费者

通过使用属性绑定（仅方括号：

[ngModel]

），您可以设置从模型到模板的单向绑定。您需要使用双向绑定来反映模型中的更改（

consumerProfile

object）。为此，请将

[ngModel]

更改为

[（ngModel）]

（在方括号内添加括号）

来自angular docs：

您通常希望在用户进行更改时同时显示数据属性和更新该属性

在元素端，它结合设置特定元素属性和侦听元素更改事件

Angular为此提供了一种特殊的双向数据绑定语法，[（x）]。[（x）]语法将属性绑定的括号[x]与事件绑定的括号（x）组合在一起

---

[（ngModel）]

是否应该工作？您需要使用双向绑定来反映模型中的更改（

consumerProfile

对象）。将

[ngModel]

更改为

[（ngModel）]

。查看文档，不清楚您使用的是哪个版本的Angular。如果是AngularJS，请尝试：

ng model=“consumerProfile.firstName”>

。另外，请确保您已经定义了

$scope.consumerProfile={firstName:，lastName:：…}

@FDavidov它肯定不是angularJS