Обновить объект класса с помощью входных привязок - PullRequest
Новая
       8

Обновить объект класса с помощью входных привязок

0 голосов
/ 02 мая 2018

У меня есть список входов, которые связаны с объектом в моем компоненте. Я хочу иметь возможность изменять значения в полях ввода и изменять их в связанном объекте - в настоящее время это не так.

Вот мои файлы:

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>

1 Ответ

0 голосов
/ 02 мая 2018

Используя привязку свойства (только квадратные скобки: [ngModel]), вы устанавливаете одностороннюю привязку от вашей модели к шаблону. Вам необходимо использовать двухстороннее связывание, чтобы отразить изменения в вашей модели (consumerProfile объект). Для этого измените [ngModel] на [(ngModel)] (добавьте символы в квадратных скобках).

Из угловых документов:

Вы часто хотите отображать свойство данных и обновлять это свойство, когда пользователь вносит изменения.

На стороне элемента, которая принимает комбинацию установки определенного свойства элемента и прослушивания события изменения элемента.

Для этой цели Angular предлагает специальный двусторонний синтаксис привязки данных, [(x)]. Синтаксис [(x)] объединяет скобки привязки свойства [x] с круглыми скобками привязки события (x).

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

...