ОШИБКА TypeError: Не удается прочитать свойство 'add' неопределенного значения в Component.clickHandler

#javascript #html #angular #typescript #angular8

#javascript #HTML #угловатый #typescript #angular8 #угловой

Вопрос:

В настоящее время я работаю над Angular 8. То, что я пытаюсь здесь сделать, это изменить цвет div, когда он выбран. Но когда я нажимаю на div, это выдает мне вышеупомянутую ошибку. Любая помощь была бы очень признательна

Мой HTML-код

   <div class="icon text-custom-white bg-light-green" id="myDIV" (click)="clickHandler(this)">

                  <img
                  src="{{category?.CategoryImage || 'https://giftclubimagestorage.blob.core.windows.net/images/biryani.jpg'}}"
                  class="rounded-circle"
                  alt="{{category?.CategoryTitle || ''}}" class="imgrr">

            </div>

Мой CSS-код

 .icon {

}

.selected {

  border-color: 20px solid blue;

}

Мой TS-код

   clickHandler(element) {
    // Get currently selected element(s)
    const old = document.getElementsByClassName('icon');

    
    for (let i = 0; i < old.length; i  ) {
      // Remove current selected class
      console.log(old[i].classList.remove('selected'));
      }
    // On element that called the function add selected class
    element.classList.add('selected');
  }

Ответ №1:

Использование this в вашем (click)="clickHandler(this)" не относится к элементу. Это будет относиться к class Properties . Ошибка заключается в том, что element вкл element.classList.add('selected'); есть undefined .

Если вы хотите получить элемент на свой Component.ts , лучше использовать @viewChild

Но для ваших целей здесь лучше использовать ngClass и простой boolean вариант, подобный этому примеру:

Пример кода для вас на Stackblitz:

Компонент.стиль.css

 .selected {
  border: solid 1px black;
  border-color: 20px solid blue;
}
.not-selected {
  border-color: none;
}

Component.template.html

 <div (click)="toggle()" [ngClass]=" (isSelected) ? 'selected' : 'not-selected' ">Select Test</div>

Component.component.ts

 import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
}) 

export class AppComponent  {

  public isSelected: boolean = false;

  toggle = () => {
    this.isSelected = !this.isSelected
  }
}

1. Я пробовал ваше решение, но оно применяет стиль ко всем изображениям внутри div. Но я особенно хочу применить стиль только к выбранному изображению. И отложите другие изображения в сторону.

2. Понял. Если у вас их несколько и, например, вы используете *ngFor для их отображения, используйте второе свойство, такое как imgID и в toggle функции получите ID тоже, а в ‘ngClass’ добавьте второе условие, что если imgID == ID .

3. Вы имеете в виду что-то вроде этого: ‘selected’: ‘not-selected'» *ngIf=»категория?. CategoryImage»> </div>

4. Нет. Я сделал образец для вас здесь: stackblitz.com/edit/angular-ivy-bqchrq?file=src/app /…

5. О, большое тебе спасибо, чувак. Вы проделали потрясающую работу. С благодарностью

Ответ №2:

Я делал что-то подобное раньше, но я не знаю, это то, что именно вы хотите. В моем коде ts,

 selectedIndex:number;

В моем html

 <div class="icon text-custom-white bg-light-green {{selectedIndex = rowIndex? 'selected' : ''}}" id="myDIV" (click)="selectedIndex=rowIndex">

                  <img
                  src="{{category?.CategoryImage || 'https://giftclubimagestorage.blob.core.windows.net/images/biryani.jpg'}}"
                  class="rounded-circle"
                  alt="{{category?.CategoryTitle || ''}}" class="imgrr">

            </div>

Предполагая, что вы зацикливаете категорию из массива, используя ng-for-index