Question

我想要类似上图所示的内容。当我单击“编辑”按钮时，我应该能够编辑标签（有关您的标签的一些信息）。

<ion-item-divider>
      <ion-label>Summary</ion-label>
      <button ion-button clear item-end style="font-size:11px;color: #3BABE3;font-weight:bold;">Edit
        <ion-icon name="ios-arrow-forward" class="arrow"></ion-icon>
      </button>
  </ion-item-divider>

      <ion-item class="items">
        <p style="color:grey;font-size:11px;">A little about you</p>

      </ion-item>

当我单击“编辑”按钮时，标签应被屏蔽。

我正在将“关于您的事”添加到一个名为summary的变量中。

<p style="color:grey;font-size:11px;">A little about you</p>

实际上，它应该是<textarea>而不是<p>

Answer 1

尝试使用contenteditale属性。

<ion-item class="items">
    <p contenteditable="true" style="color:grey;font-size:11px;">A little about you</p>
</ion-item>

如果要将其绑定到变量，则可以执行以下操作：

<ion-item class="items">
    <p [attr.contenteditable]="editable" style="color:grey;font-size:11px;">A little about you</p>
</ion-item>

editable是布尔变量。

Answer 2

我有一个类似的需求/代码示例，不久后，我意识到让用户编辑同一视图的离子标签内联基本上是一个糟糕的用户体验。

请考虑将您的按钮“编辑”成一个警报控制器，其中将包含输入字段。这就是下面的操作方式，在我的情况下，我没有特殊的“编辑”按钮-用户可以单击标题来更改其名称。但我认为您会以自己的方式解决问题

<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;
    });
  }

通过单击来阻止和取消阻止要编辑的标签：Ionic

2 个答案: