ERROR TypeError: Cannot read property 'add' of undefined at Component.clickHandler

Question

I'm Currently working on Angular 8. What I'm trying to do here is change the color of div when it's selected. But when I click on div it gives me above mentioned error. Any Help would be very much appreciated

我的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');
  }

Answer 1

在您的 (click)="clickHandler(this)" 中使用 this 并未引用该元素。它将引用class Properties。错误是因为 element.classList.add('selected'); 上的 element 是 undefined.

如果您想在 Component.ts 上获取元素，最好使用 @viewChild

但为了您的目的，最好使用 ngClass 和一个简单的 boolean 变量，例如此示例：

Stackblitz 上的示例代码：

Component.style.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
  }
}

Answer 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

从数组中循环类别

ERROR TypeError: Cannot read property 'add' of undefined at Component.clickHandler

ERROR TypeError: Cannot read property 'add' of undefined at Component.clickHandler

html

javascript

typescript

angular

angular8