如何将不同的参数发送到相同的函数以进行显示/隐藏答案

【问题标题】：How to send different parameters to same function for show/hide如何将不同的参数发送到相同的函数以进行显示/隐藏
【发布时间】：2019-03-14 19:37:20
【问题描述】：

我有三个密码输入框，点击按钮我只需要使用 fontawosme 图标显示或隐藏密码类型（文本或密码）。

以下是我尝试作为代码的代码：

ts.文件

changePasswordType(type) {
  if (type == 'oldPassword') {
    this.showPassword = !this.showPassword;
    this._pwdType = this.showPassword ? 'text' : 'password'
  } else if (type == 'newPassword') {
    this.newPassword = !this.newPassword;
    this._pwdType = this.newPassword ? 'text' : 'password'
  } else {
    this.confirmPassword = !this.confirmPassword;
    this._pwdType = this.confirmPassword ? 'text' : 'password'

  }
}

<div class="form-group position-relative">
  <label for="oldpassword" class="lable-title mb-0">Old Password</label>
  <input [type]="_pwdType" class="form-control" required name="old_password" [(ngModel)]="form.old_password" #old_password="ngModel" id="oldpassword">
  <button class="position-absolute hide-password" *ngIf="!showPassword" (click)="changePasswordType('oldPassword')">
              <i class="far fa-eye-slash"></i>
            </button>
  <button class="position-absolute hide-password " *ngIf="showPassword" (click)="changePasswordType('oldPassword')">
              <i class="far fa-eye"></i>
            </button>
</div>


<div class="form-group position-relative">
  <label for="newpassword" class="lable-title mb-0">New Password</label>
  <input [type]="_pwdType" class="form-control" required name="password" [(ngModel)]="form.password" #password="ngModel" id="newpassword">
  <button class="position-absolute hide-password" *ngIf="!newPassword" (click)="changePasswordType('newPassword')">
              <i class="far fa-eye-slash"></i>
            </button>
  <button class="position-absolute hide-password " *ngIf="newPassword" (click)="changePasswordType('newPassword')">
              <i class="far fa-eye"></i>
            </button>
</div>


<div class="form-group position-relative">
  <label for="conformpassword" class="lable-title mb-0">Confirm Password</label>
  <input [type]="_pwdType" class="form-control" required name="confirm_password" [(ngModel)]="form.confirm_password" #confirm_password="ngModel" id="conformpassword">
  <button class="position-absolute hide-password" *ngIf="!confirmPassword" (click)="changePasswordType('confirmPassword')">
              <i class="far fa-eye-slash"></i>
            </button>
  <button class="position-absolute hide-password " *ngIf="confirmPassword" (click)="changePasswordType('confirmPassword')">
              <i class="far fa-eye"></i>
            </button>
</div>

单击按钮时，所有三个输入框都转换为输入文本或密码。我只需要当我点击一个按钮时，只有那个按钮应该显示类型文本或密码，并且图标应该分别改变

【问题讨论】：

你能复制一下stackblitz吗，stackblitz.com并在这里分享链接
仅通过查看您的代码，我可以看到您对所有 3 种输入类型都使用了相同的“_pwdType”，然后您正在更新_pwdType 的值。很明显，它会反映它被引用的地方。可能您需要为每个输入使用唯一字段
@dreamweiver，我只想从这里知道，如果不使用不同的变量，就不能这样做，因为代码也会更长。
你可以参考@wandrill的答案，他的逻辑简洁明了，事实上你甚至不需要_pwdType这个变量了
@dreamweiver，这里是代码stackblitz.com/edit/…的链接

标签： angular

【解决方案1】：

我还没有真正理解这个问题，但重构将是：

在.ts

showPassword  = false;

在.html

<input [type]="showPassword ? 'password':'text'">
<button (click)="showPassword  = !showPassword  ">
    <i [ngClass]="{'far fa-eye-slash': !showPassword  , 'far fa-eye': showPassword  }"></i>
</button>

StackBlitz 上的工作代码，https://stackblitz.com/edit/angular-372rjc

【讨论】：

我已经添加了问题
我已经用输入编辑了解决方案。我还没有检查过tertnaire的顺序。但这是给你主要的想法。
您提供的解决方案运行良好，但如果想对其他两个输入应用相同的功能，那么我需要在每个输入上使用不同的变量，而我不想使用它。
如果他们有不同的工作方式，你必须这样做。或者您可以拥有一个包含 3 个密码显示的对象。但对我来说，都是一样的。
@vinuta: 不，你不必，你可以使用现有的变量 showPassword ， confirmPassword 和 newPassword ，你已经在各个部分使用了 *ngIF。