angular - 尝试在 Ionic 4/Angular 中获取 Ng Module 值以获取可编辑文本

Question

我正在尝试让一些可编辑的文本在 Ion-input 中工作。因此，当用户点击离子输入时，用户将能够编辑文本。

如何让 & 的 Ng 模型等于& 的editUserName值editUserNameUserNameUserBio

我试图将 editUserName&editUserName它的值设置为ngOnInit

像这样

  ngOnInit() {
  this.recordRow.EdituserName = this.userName;

或者

     this.item.EdituserBio = this.item.userBio;

或者

      this.item.EdituserBio = this.userBio;

}

或者通过简单地{{item.userBio }}在 HTML 中使用。

像这样

  <ion-item>
         <ion-label><strong>Name</strong></ion-label>
         <ion-input type="text" [(ngModel)]="item.EdituserName" 
        readonly ="false"> 
                {{item.userName}} 
       </ion-input>
      </ion-item>

但这些都不适合我

HTML

<ion-item>
        <ion-input placeholder="Username" [(ngModel)]="userName"> . 
         </ion-input>
      </ion-item>
      <ion-item>
        <ion-input placeholder="User Bio" [(ngModel)]="userBio"> 
        </ion-input>
      </ion-item>



  <!-- this updates the user name -->
      <ion-item>
         <ion-label><strong>Name</strong></ion-label>
         <ion-input type="text" [(ngModel)]="item.EdituserName"> . 
         </ion-input>
      </ion-item>
        <!-- this updates the user Bio -->
      <ion-item>
        <ion-label><strong>About me</strong></ion-label>
        <ion-input type="text" [(ngModel)]="item.EdituserBio" > . 
      </ion-input>
      </ion-item>
       <div style ="text-align: center">
      <ion-button (click)="UpdateRecord(item)">
          Save Changes 
        </ion-button>
      </div>

TS

         CreateRecord() {
 let record = {};
 record['profileImage'] = this.profileImage ;
 record['userName'] = this.userName || "";
 record['userBio'] = this.userBio || "";
 this.profileService.create_NewUser(record).then(resp => {   
 console.log(resp);
})
 .catch(error => {
  console.log(error);
})

    }

   UpdateRecord(recordRow) {
    let record = {};
    record['userName'] = recordRow.EdituserName || "" ;
    record['profileImage'] = this.profileImage || ""; 
    record['userBio'] = recordRow.EdituserBio || "" ;
    this.profileService.update_User(recordRow.id, record);

   }

标签： angulartypescriptionic-framework

Answer 1

尝试在构造函数中设置默认值

construct(){ this.recordRow.EdituserName = this.userName; }