Как вызвать только текущую кнопку из нескольких кнопок с одинаковым названием функции - Angular 6

-4

У меня есть кнопка, которая показывает/скрывает поле пароля, я дал одно и то же имя функции всем кнопкам, которые показывают/скрывают, поэтому, когда я нажимаю на конкретную кнопку показа/скрытия текстового поля, она вызывает все текстовое поле вместо текущего один.

Как сделать так, чтобы только текущее нажатое текстовое поле кнопки запускалось

HTML

Изображение 174551

TS

Изображение 174551

  • 0
    Вам нужно сохранить три переменных для showtext по одной для каждого
  • 0
    Хорошо, сэр, а потом?
Показать ещё 2 комментария
Теги:
angular

4 ответа

1
Лучший ответ

textTypeOld = 'text', textTypeNew = 'text', textTypeRepeat = 'text' используйте textTypeOld = 'text', textTypeNew = 'text', textTypeRepeat = 'text'

И в HTML, отправьте строку в функцию changeText, как это

changeText("Old") // for old password
changeText("New") // for new password
changeText("Repeat") // for repeat password

и в вашем методе,

    changeText(name: string) {
    if(name === "Old") { 
     this.textTypeOld = this.textTypeOld === 'text' ? "password" : "text";
    } else if (name === "New") {  
     this.textTypeNew = this.textTypeNew === 'text' ? "password" : "text";       
    }
    else { 
this.textTypeRepeat = this.textTypeRepeat === 'text' ? "password" : "text";    
    } 
  }

Также вам необходимо изменить атрибут type для ваших входных тегов и сопоставлений в [ngClass] соответственно.

Поделиться
  • 0
    Удивительно, спасибо, я так много узнал из этого
  • 0
    @ThanveerShah, если вы действительно хотите чему-то научиться, проверьте мой ответ;)
0

просто попробуйте написать директиву переключения, которая переключается между классами fa-eye и fa-eye-slash:

директива:

import { Directive, HostListener, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appToggleIcon]'
})
export class ToggleIconDirective {

  constructor(private renderer: Renderer2) { }
  private flag = true

  @HostListener('click', ['$event']) onClick($event: Event) {
    this.flag = !this.flag;
    if (this.flag) {
      this.renderer.removeClass($event.target, 'fa-eye');
      this.renderer.addClass($event.target, 'fa-eye-slash')    
    }
    else {
      this.renderer.removeClass($event.target, 'fa-eye-slash');
      this.renderer.addClass($event.target, 'fa-eye');
    }
  }
}

использование:

<span>
  <i class="fa fa-eye" appToggleIcon>Button3 </i>
</span>
<br>
<span>
  <i class="fa fa-eye" appToggleIcon>Button2 </i>
</span>
<br>
<span>
  <i class="fa fa-eye" appToggleIcon>Button1 </i>
</span>

ДЕМО: проверьте, что, нажимая на кнопки, класс меняется.

Поделиться
0

Вы можете передать $ event из вашего html в вызов функции в качестве аргумента, чтобы получить экземпляр

changeText($event)

и в вашем файле component.ts у вас будет экземпляр элемента, который вызвал ваше событие.

Поделиться
  • 0
    Да, но как мне заставить это работать?
0

Ваша проблема заключается в том, что вы используете одно и то же состояние для всех полей ввода, поэтому решение так же просто, как сохранение индивидуального значения для каждого из них.

Вопрос в том, как вы можете сделать это эффективно? Мой подход был бы с простой директивой:

import{Directive,HostBinding,Input}from '@angular/core';

@Directive({
  selector: "input[passwordToggler]",
  exportAs: "passwordToggler"
})
export class PasswordToggler {
   @Input("passwordToggler")  
   @HostBinding()
   type: string;

   get visible(){return this.type === "text"; }

   toggleVisibility(){
      if(this.type === "text"){
        this.type === "password";
      }else{
        this.type === "text"; 
      }
   }
}

Как только вы объявите это в соответствующем модуле, вы можете использовать его как:

<input passwodToggler="text" #oldInputToggler="passwordToggler"/>
<i [ngClass]="oldInputToggler.visible ? 'bla-text' : 'bla-password'" 
    (click)="oldInputToggler.toggleVisibility()"><i/>
Поделиться
  • 0
    Я кое-что узнал, спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню