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)]（在方括号内添加parens）。

来自angular docs：

您经常希望在用户进行更改时显示数据属性并更新该属性。

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

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

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

使用输入绑定更新类对象

1 个答案: