如何通过单击<ion-item>将<ion-item>更改为<ion-input>？

Question

HTML代码：

  <ion-list>
    <ion-item  *ngFor = "let item of items;let i=index" >{{item.itemName}}</ion-item>
  </ion-list>

我希望当用户单击item字段时，将任何特定的ion-item转换为输入字段。有没有办法实现它？

Answer 1

使用angular，你可以进行模板检查和监听用户点击<ion-item>。

    // you must map itemVisible to true for each item you have.
    // I don't know what kind of values you're dealing with
    items = [
        {
          itemName: 'item1',
          itemVisible: true
        },
        {
          itemName: 'item2',
          itemVisible: true
        },
        {
          itemName: 'item3',
          itemVisible: true
        }
      ];

    constructor() {}

  <ion-list>
    <ion-item *ngFor="let item of items" 
              (click)="item.itemVisible = !item.itemVisible">
      <div *ngIf="item.itemVisible; else ionInput">
        {{item.itemName}}
      </div> 
      <ng-template #ionInput>
        <ion-input placeholder="{{item.itemName}}"></ion-input>
      </ng-template>
    </ion-item>
  </ion-list>