Блог

Главная - Вопросы по программированию - Как сфокусировать / выделить элементы в HTML в Angular?

Как сфокусировать / выделить элементы в HTML в Angular?

#html #angular

#HTML #angular

Вопрос:

Я использую Angular для создания своей веб-страницы HTML, и у меня есть элементы HTML, которые семантически считаются элементами / единицами, например, список, созданный *ngFor тем, где каждый элемент считается элементом / единицей.

 <div *ngFor="let foo of foos; ... " [class.selected]="currentSelectedDivIndex == i">
    <p>
    </p>
</div>

Итак, «единица измерения» — это div контейнер. Я хотел бы сделать такой элемент «выбираемым», что означает, что он меняет цвет фона, чтобы указать статус выбора. И все это пока работает нормально, используя [class.selected] в сочетании с проверкой индекса.

Но..

AFAIK только определенные элементы HTML могут быть сфокусированы / выбраны, такие как кнопки, текстовые поля и т.д. Каков общий подход к выбору моих собственных элементов?

В настоящее время я решил это на уровне приложения, прикрепив (click) событие к этим элементам, которые устанавливают одну из следующих переменных:

 currentSelectedDivIndex: number
leftImageIsSelected: boolean;
rightImageIsSelected: boolean;

Но это кажется неправильным. Кстати, есть такая проблема:

  • Нажмите на кнопку
  • Нажмите на элемент div списка
  • Снова нажмите Enter ==> Кнопка запуска

Кнопка все еще была выбрана HTML в фоновом режиме и выполняется снова, хотя я нажал на контейнер div после нажатия кнопки.

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

1. onClick set SelectedItem === index из цикла ngFor и проверьте в ngClass, что SelectedItem равен индексу

2. Это мое текущее решение, но является ли это общим / правильным подходом? Кроме того, у вас есть решение моей проблемы с «примечанием»?

3. Да, то, что вы делаете, было бы довольно стандартным способом сделать это для angular

4. Вы также должны добавить <p (click)=»onClick(index)»> {{foo}} </p> в файл .ts onClick(index) { this.SelectedItem = index;