フォーム内の双方向データバインディングが機能しない角度2

Question

Userオブジェクトを入力として受け取るこのフォームコンポーネントがあります。私は2つの方法のデータバインディングのためにそのオブジェクトを使用したいが、それは動作しません。問題はどこにあるのですか？

---

PS：入力パラメータのコピーから問題が発生しているようです。元のものを渡すと正常に動作しますが、コピーを渡すと双方向のデータバインディングが機能しません。どのように私はそれをコピーで動作させることができますか？

<user-form [selectedUser]="copyUser()" (isValidated)="onToggleDialog($event)"></user-form> 


copyUser() :User { 
    // when returning the copy it doesn't work, 
    // but when returning this.userToPass it works 
    return JSON.parse(JSON.stringify(this.userToPass)); 
} 

---

import { Component, EventEmitter } from '@angular/core'; 

import { 
    FormBuilder, 
    FormGroup, 
    Validators, 
    AbstractControl, 
    ReactiveFormsModule 
} from '@angular/forms'; 

import { User } from '../../domain/user'; 
import { GlobalMailValidator } from '../../validators/mail/mail.validator'; 
import { Role } from '../../domain/role'; 
import { UserService } from '../../services/user.service'; 

@Component({ 
    inputs: ['selectedUser'], 
    outputs: ['isValidated'], 
    selector: 'user-form', 
    templateUrl: 'app/component/user/user.form.html' 
}) 
export class UserForm { 

    /** 
     * The user passed to this component. It should preferably be a copy. 
     */ 
    selectedUser: User; 

    /** 
     * All the roles in the DB. 
     */ 
    roles: Role[]; 

    /** 
     * All the time zones in the DB. 
     */ 
    timeZones: any[]; 

    /** 
     * Event emitter to output the edited user. 
     * Returns null if the operation was canceled. 
     */ 
    isValidated: EventEmitter<User>; 

    constructor(private userSerive: UserService) { 

     this.isValidated = new EventEmitter(); 
     // instantiate the roles array only ones on component creation 
     this.userSerive.listRoles().then(res => this.roles = res); 
     this.userSerive.listTimeZones().then(res => this.timeZones = res); 
    } 

    assessValidation(success: boolean) :void { 
     // the selected user object does not change :(
     console.log(this.selectedUser); 
     if(success) { 
      //this.isValidated.emit(this.selectedUser); 
     } else { 
      // if a cancel operation was requested emit null instead 
      this.isValidated.emit(null); 
     } 

    } 

} 

---

<!-- THIS DOES NOT UPDATE !!!! --> 
<div>{{selectedUser.firstName}}</div> 
<form #controlForm="ngForm"> 
      <div class="ui-g"> 
        <input type="text" 
          placeholder="Login" 
          [(ngModel)]="selectedUser.login" 
          name="login" 
          #login="ngModel" 
        />  
      </div> 
      <div class="ui-g"> 
       <input type="text" 
         placeholder="First Name" 
         [(ngModel)] = "selectedUser.firstName" 
         name="firstName" 
         #firstName="ngModel" 
       /> 
      </div> 
      <div class="ui-g"> 
       <input type="text" 
         placeholder="Last Name" 
         [(ngModel)] = "selectedUser.lastName" 
         name="lastName" 
         #lastName="ngModel" 
       /> 
      </div>    
      <div class="ui-g"> 
       <input type="text" 
         placeholder="e-mail" 
         [(ngModel)]="selectedUser.email" 
         name="email" 
         #email="ngModel" 
       /> 
      </div> 

      <div class="ui-g"> 
        <input type="checkbox" [(ngModel)]="selectedUser.isDeleted" name="isDeleted" #isDeleted="ngModel"/> 
      </div> 

      <button type="button" [disabled]="!controlForm.form.valid" class="ui button" (click)="assessValidation(true)">Save</button> 
      <button type="button" class="ui button" (click)="assessValidation(false)">Cancel</button> 
</form> 

---

import { Role } from '../domain/role'; 

export class User { 
    fullName: string; 
    password: string; 
    isDeleted: boolean = false; 

    constructor(public id: number, 
     public login:string,  
     public firstName:string, 
     public lastName:string, 
     public email:string, 
     public locale:string, 
     public timeZone:string, 
     public version:number, 
     public roles:Role[]) { 
    this.fullName = this.firstName + ' ' + this.lastName;  
    } 
} 

---

export class Role { 
    id: number; 
    name: string; 
    refId: string; 
} 

Answer 1

あなたは最初のユーザーオブジェクトを初期化する必要があります。

selectedUser: User = new User();