如何預填充ngModel結合

Question

我創建了一個Modal頁面，在這裏我想告訴pre-populateddata用戶，每當用戶editsdata它必須綁定到我的本地collectDataInModalPage_afterEdit形式。

演示這裏：https://stackblitz.com/edit/ionic-jse3zv?file=pages%2Fhome%2Fhome.ts

問題：[(ngModel)]="collectDataInModalPage_afterEdit" < =這個ngModel離開form空白，因爲它被設置爲空在這裏begining它

collectDataInModalPage_afterEdit = { 
     "first_name":"", 
     "last_name":"", 
     "mobile_number":"" 
    }; 

我拿出[(ngModel)]爲mobile_number字段填充，請參閱演示

問：我想這data =>userDataBeforeEdit到pre-populate形式，並希望收集data這一=>collectDataInModalPage_afterEdit

演示這裏：https://stackblitz.com/edit/ionic-jse3zv?file=pages%2Fhome%2Fhome.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    userDataBeforeEdit = { 
    "first_name":"John", 
    "last_name":"Doe", 
    "mobile_number":"98869934445", 
}; 

collectDataInModalPage_afterEdit = { "first_name":"","last_name":"","mobile_number":""};  

    constructor(public navCtrl: NavController) { 

    } 

} 

HTML

<ion-item> 
    <ion-label floating>Name</ion-label>   
    <ion-input type="text" value="{{userDataBeforeEdit.first_name}}" [(ngModel)]="collectDataInModalPage_afterEdit.first_name"></ion-input>     
</ion-item> 


<ion-item> 
    <ion-label floating>Last Name</ion-label> 
    <ion-input type="text" value="userDetails" [(ngModel)]="collectDataInModalPage_afterEdit.last_name"></ion-input>     
    </ion-item> 


    <ion-item> 
    <ion-label floating>Phone Number</ion-label> 
    <ion-input type="text" value="{{userDataBeforeEdit.mobile_number}}"></ion-input>       
    </ion-item> 

請幫助我感謝在Adavance !!!!

Answer 1

我會做什麼在這種情況下只使用Object.assign和完全跳過value，所以：

collectDataInModalPage_afterEdit = {};  

ngOnInit() { 
    this.collectDataInModalPage_afterEdit = Object.assign({},this.userDataBeforeEdit) 
} 

然後，你可以在你的模板中使用this.collectDataInModalPage_afterEdit與[(ngModel)]

DEMO：我不知道如何使用value和ngModel在這種情況下就像你正在嘗試。

另一個選項是，如果這是一個形式的（好像它可能是）是建立形式（與value）本身，即在提交您可以直接分配形式對象的變量collectDataInModalPage_afterEdit