Блог

Главная - Вопросы по программированию - Как показать / скрыть вместо значка переключения?

Как показать / скрыть вместо значка переключения?

#javascript #html #angular

#javascript #HTML #угловой

Вопрос:

Мне нужно показать / скрыть значок вместо того, чтобы прямо сейчас переключать значок. Код:

                 <td *ngIf="isActive !== i" (click)="clickerTrue(set, i)">
                  <img src="https://img.icons8.com/office/30/000000/plus.png"/>
                </td>
                <td *ngIf="isActive === i">  
                  <input type="text" [(ngModel)]="set.note" name="value" class="form-control" /> 
              </td>

i является ли индекс из ngFor 

   clickerTrue(set, index) { 
    this.isActive = this.isActive === index ? null : index; 
  }

isActive первое значение переменной равно false.

Комментарии:

1. Я не понимаю вопрос так, как он написан сейчас. Пожалуйста, предоставьте Stackblitz или некоторую дополнительную информацию, например, ожидаемые результаты.

Ответ №1:

Если вы используете ngFor, почему вы передаете объект?

 <button *ngFor="let item of items" (click)="toggleActive(item)">click me</button>


toggleActive(item) {
  item.active = !item.active;
}

Комментарии:

1. Что такое item.active. Когда я утешаю. log item.active я получил неопределенный

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

Ответ №2:

это работа в *ngFor

 <td *ngIf="isActive != set" (click)="clickerTrue(set, i)">
              <img src="https://img.icons8.com/office/30/000000/plus.png"/>
            </td>
            <td *ngIf="isActive == set">  
              <input type="text" [(ngModel)]="set.note" name="value" class="form-control" /> 
          </td>  
  
 public isActive: any;

clickerTrue (set: any, index: number) { 
    this.isActive = set; 
}

Комментарии:

1. Пожалуйста, проверьте, поможет ли это вам.

2. проверьте это новое решение, оно работает для меня в моем демонстрационном проекте.