У меня был похожий пример потребности / кода, и через некоторое время я понял, что попросить пользователей отредактировать вашу встроенную ионную метку в том же виде - это в основном плохой UX.
Подумайте о том, чтобы сделать эту кнопку "отредактированной" вашей, чтобы просто вызвать контроллер предупреждений, который будет содержать поле ввода. Вот как я это сделал ниже, и в моем случае у меня не было специальной кнопки «редактировать» - пользователи могли щелкнуть заголовок, чтобы изменить его имя. Но я думаю, что вы получите способ, которым вы можете сделать это в вашем случае
<ion-item *ngFor="let set of sets; index as i">
<button ion-button clear (click)="changeSetTitle( set.title, i)">
<h2>{{ set.title }}</h2>
</button>
<p>{{ set.length }} items</p>
<button ion-button icon-right clear item-end (click)="loadSetComponent(i)">
Manage
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-item>
А в файле ts:
changeSetTitle(currentTitle, index) {
this.alertOn = true;
let alert = this.alertCtrl.create({
title: 'Change name:',
message: 'current: "'+currentTitle+'"',
inputs: [
{
placeholder: 'type in a new name'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
this.alertOn = false;
}
},
{
text: 'Confirm',
handler: data => {
if (data[0].length === 0) {
this.sets[index].title = currentTitle;
} else {
this.saveRequired = true;
this.sets[index].title = data[0];
}
this.alertOn = false;
}
}
]
});
// small trick to force focus onto alert (not working for iOS unfortunately.)
alert.present().then(() => {
const alertInput: any = document.querySelector('input.alert-input');
alertInput.focus();
return;
});
}