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

将相同的功能绑定到不同的按钮Ionic v2

2 个答案: