ionic4 - 如何改变进入通过点击?

Question

HTML 代码：

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

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

标签： ionic4

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>