Попытка получить значение значений модуля Ng в Ionic 4 / Angular для редактируемого текста

Question

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

Как мне сделать так, чтобы модель Ng editUserName & editUserName равнялась значению UserName & UserBio

Я пытался установить 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);

   }

Answer 1

Что вам нужно сделать, это использовать ионную метку для отображения значения de (в настоящее время вы используете ионный вход только для отображения имени и биографии, а другой для редактирования), а затем два ионных входа для редактирования:

Так что это будет ваш .html

<ion-item>
    <ion-label placeholder="Username"> {{userName}}</ion-label>
</ion-item>
<ion-item>
    <ion-label placeholder="User Bio"> {{userBio}} </ion-label>
</ion-item>

<!-- this updates the user name -->
<ion-item>
    <ion-label><strong>Name</strong></ion-label>
    <ion-input type="text" [(ngModel)]="userName"> .
    </ion-input>
</ion-item>
<!-- this updates the user Bio -->
<ion-item>
    <ion-label><strong>About me</strong></ion-label>
    <ion-input type="text" [(ngModel)]="userBio"> .
    </ion-input>
</ion-item>

Answer 2

Решил это. просто нужно изменить item.EdituserBio на item.userBio

как

     <ion-input type="text" [(ngModel)]="item.userBio" > . 

Answer 3

Попробуйте установить значение по умолчанию в конструкторе

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