将相同功能与不同按钮离子V2结合

Question

我为密码视图创建了一个眼图标按钮/notview

但是有一个我需要是"恢复密码"页面

在此页面中，有3个输入，并附有相同的按钮...

当我单击一个时，所有这些都会被切换。

如何分别绑定每个功能？

代码如下：

html

<ion-item>
  <ion-input placeholder="Senha antiga" [type]="isSenhaView ? 'password' : 'text'">
  </ion-input>
  <button ion-button icon-only item-right clear color="light" (click)="toggleSenhaView()"><ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
  </button>
</ion-item>

ts

isSenhaView : boolean = true;
  toggleSenhaView():void{
    this.isSenhaView = !this.isSenhaView;
  }

非常感谢。

Answer 1

您可以在功能中轻松使用3个布尔值

isSenhaView : boolean = true;
isSenhaView2 : boolean = true;
isSenhaView3 : boolean = true;
  toggleSenhaView():void{
    this.isSenhaView = !this.isSenhaView;
    this.isSenhaView2 = !this.isSenhaView;
    this.isSenhaView3 = !this.isSenhaView;
  }

Answer 2

代码样本：

<ion-item>
   <ion-input placeholder="Senha antiga" [type]="isSenhaView1 ? 'password' : 
       'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="toggleSenhaView(1)">
      <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
  </button>
</ion-item>
<ion-item>
    <ion-input placeholder="Senha antiga" [type]="isSenhaView2 ? 'password' 
      :  'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="toggleSenhaView(2)">
  <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
 </button>
</ion-item>
<ion-item>
   <ion-input placeholder="Senha antiga" [type]="isSenhaView3 ? 'password' : 
      'text'">
</ion-input>
   <button ion-button icon-only item-right clear color="light" 
     (click)="toggleSenhaView(3)">
   <ion-icon [name]="isSenhaView ? 'eye' : 'eye-off'"></ion-icon>
   </button>
</ion-item>

isSenhaView1 : boolean = true;
isSenhaView2 : boolean = true;
isSenhaView3 : boolean = true;
toggleSenhaView(x):void{
   switch (x) 
   {
    case 1: 
      this.isSenhaView1 = !this.isSenhaView1;
      break; 
    case 2: 
      this.isSenhaView2 = !this.isSenhaView2;
      break; 
    case 3: 
      this.isSenhaView3 = !this.isSenhaView3;
      break;                 
    }