Angular2中为类选择器获取的元素增删类名失效问题

Hey there! Let's break down why your current code isn't working and fix it up properly.

The Issues in Your Current Code #

• You're treating a NodeList like a single element: document.querySelectorAll('.option-btn') returns a NodeList (a collection of elements), not one single button. You can't call class methods directly on the whole collection—you need to loop through each element individually.
• Wrong method names: addClass() and removeClass() are jQuery methods, not native JavaScript. For vanilla JS, you need to use element.classList.add() and element.classList.remove() instead.
• Invalid HTML structure: Your <li> tags are using self-closing syntax (/>) but still have content after them. That'll mess up the DOM structure—you need to close the tag properly with </li>.

Fixed Code #

First, correct your HTML:

<ul> 
  <li class="option-btn cm-grey">option 1</li> 
  <li class="option-btn cm-grey">option 2</li> 
  <li class="option-btn cm-grey">option 3</li> 
</ul>

Then update your TypeScript code to properly iterate over the elements and use native class methods:

// Grab all the option buttons
const allBtn = document.querySelectorAll('.option-btn');

// Loop through each button in the NodeList
allBtn.forEach(btn => {
  btn.classList.remove('cm-grey');
  btn.classList.add('cm-blue');
});

A Better Angular Approach #

Since you're using Angular, it's best practice to avoid direct DOM manipulation whenever possible. Instead, use Angular's built-in ngClass directive to bind class names dynamically:

In your component TypeScript:

// Define a flag to control the class state
useBlueClass = true;

In your template:

<ul> 
  <li class="option-btn" [ngClass]="{'cm-blue': useBlueClass, 'cm-grey': !useBlueClass}">option 1</li> 
  <li class="option-btn" [ngClass]="{'cm-blue': useBlueClass, 'cm-grey': !useBlueClass}">option 2</li> 
  <li class="option-btn" [ngClass]="{'cm-blue': useBlueClass, 'cm-grey': !useBlueClass}">option 3</li> 
</ul>

Now you can toggle the class for all items just by changing the value of useBlueClass in your component—no direct DOM touches needed!

内容的提问来源于stack exchange，提问作者AMit SiNgh