typescript 在 Angular 中删除或添加类

Remove or add class in Angular

提问by Senchu Thomas

I have a list and the plugin (dragula) I used, adds certain CSS class on certain action. I am using Angular 5. I want to find out the presence of certain class (myClass) and remove that and replace with (yourClass). In jQuery we can do that like this

我有一个列表和dragula我使用的插件 ( )，在某些操作上添加了某些 CSS 类。我正在使用 Angular 5。我想找出某个类 ( myClass)的存在并将其删除并替换为 ( yourClass)。在 jQuery 中，我们可以这样做

$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );

How can I achieve this in Angular5. Here the main issue is that myClassis added automatically to the selected liby the plugin. So using a function I cant set the class.

我怎样才能在 Angular5 中实现这一点。这里的主要问题是myClass自动添加到li插件选择的。所以使用函数我不能设置类。

When I tried with renderer2, it is removing the CSS class and adding another class. But it is adding only to the first li. My code is:

当我尝试使用 renderer2 时，它正在删除 CSS 类并添加另一个类。但它只添加到第一个li. 我的代码是：

let myTag ; 
myTag = this.el.nativeElement.querySelector("li");
this.renderer.addClass(myTag, 'gu-mirrorss')
this.renderer.removeClass(myTag, 'dragbox');

<div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
       {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
       <li #vc  data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myId > {{question.questionId}} {{question.questionSentence}}</li>
</div>

回答by Sandip - Full Stack Developer

Import ElementReffrom angular core and define in constructor then try below code:

ElementRef从 angular core导入 并在构造函数中定义，然后尝试以下代码：

Below line of code will give you first occurrence of <p>tag from Component. querySelectorgives you first item and querySelectorAllgives you all items from DOM.

下面的代码行会给你第一次出现<p>来自组件的标签。 querySelector为您提供第一个项目并querySelectorAll为您提供 DOM 中的所有项目。

import { Component, ElementRef } from "@angular/core";

constructor(private el: ElementRef) {
}

let myTag = this.el.nativeElement.querySelector("p"); // you can select html element by getelementsByClassName also, please use as per your requirement.

Add Class:

添加类：

if(!myTag.classList.contains('myClass'))
{
    myTag.classList.add('myClass'); 
}

Remove Class:

删除类：

myTag.classList.remove('myClass'); 

回答by LordAlpaca

If you want to change all li.myClass, you can do like this:

如果你想改变所有 li.myClass，你可以这样做：

Note the #questionsin the container div.

注意#questions容器 div 中的 。

Component.ts

组件.ts

@ViewChild('questions') questions: any;

questions.nativeElement.querySelectorAll('.myClass').forEach(
  question => {
    question.classList.remove('myClass');
    question.classList.add('newClass');
  }
)

Component.html

组件.html

<div #questions class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
       {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
       <li
         #vc 
         data-toggle="tooltip"
         data-placement="bottom"
         title= {{question.questionSentence}}
         class="well dragbox"
         *ngFor="let question of questions; let i = index"
         [attr.data-id]="question.questionId"
         [attr.data-index]="i"
         (click)="addThisQuestionToArray(question,i, $event)"
         [class.active]="isQuestionSelected(question)"
         #myId>
           {{question.questionId}} {{question.questionSentence}}
      </li>
</div>

回答by WasiF

From Official Docs

来自官方文档

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

回答by Daniel Lopez

You can use id in your html

您可以在 html 中使用 id

<button #namebutton class="btn btn-primary">login</button>

add viewchild in your.ts

在 your.ts 中添加 viewchild

@ViewChild('namebutton') namebutton: ElementRef;

create a function that will trigger the event

创建一个将触发事件的函数

 actionButton() {
    this.namebutton.nativeElement.classList.add('clase a activar ')
    setTimeout(() => {
      this.namebutton.nativeElement.classList.remove('clase a desactivar')
    }, 1000);
  }

and call the function.

并调用该函数。

回答by Inamur Rahman

The Best and easiest way is : -

最好和最简单的方法是： -

If student is null then dissabled else not. Use this in button attribute. If you are using bootstrap theme

如果学生为空，则禁用否则不禁用。在按钮属性中使用它。如果您使用引导程序主题

[ngClass]="{disabled: (students === null) ? true : false}"