javascript - 使用输入绑定(bind)更新类对象

Question

我有一个输入列表，这些输入绑定(bind)到我的组件中的一个对象。我希望能够更改输入框中的值并让它们在关联的对象中发生变化 - 目前它们不是。

这是我的文件:

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>

Answer 1

通过使用属性绑定(bind)(只是方括号:[ngModel])，您设置了一种从模型到模板的绑定(bind)方式。您需要使用两种方式绑定(bind)来反射(reflect)模型中的更改(consumerProfile 对象)。为此，将 [ngModel] 更改为 [(ngModel)](在方括号内添加括号)。

来自 Angular 文档:

You often want to both display a data property and update that property when the user makes changes.

On the element side that takes a combination of setting a specific element property and listening for an element change event.

Angular offers a special two-way data binding syntax for this purpose, [(x)]. The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).

https://angular.io/guide/template-syntax#two-way-binding---