使用输入绑定更新 class 对象

Question

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

这是我的文件：

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

通过使用属性绑定（只是方括号：[ngModel]），您设置了从模型到模板的一种绑定方式。您需要使用两种方式绑定来反映模型（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---

使用输入绑定更新 class 对象

Update class object with input bindings

javascript

angular

angular-ngmodel