我有一个列表,我使用的插件(dragula
)在某些操作上添加了某些css类。我正在使用Angular5。我想找出某个类(myClass
)的存在并删除它并替换为(yourClass
)。在jquery中,我们可以这样做
$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );
我如何在Angular5中实现这一点。这里的主要问题是插件会自动将myClass
添加到选定的li
。所以使用函数我不能设置类。
当我尝试使用renderer2时,它正在删除css类并添加另一个类。但它只是增加了第一个李。我的代码是
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>`
答案 0 :(得分:6)
从angular core导入ElementRef
并在构造函数中定义,然后尝试下面的代码:
下面的代码行将首次出现来自Component的<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.
添加课程:
if(!myTag.classList.contains('myClass'))
{
myTag.classList.add('myClass');
}
删除课程:
myTag.classList.remove('myClass');
答案 1 :(得分:4)
您可以在HTML中使用ID
<button #namebutton class="btn btn-primary">login</button>
在您的.ts中添加viewchild
@ViewChild('namebutton') namebutton: ElementRef;
创建一个将触发事件的函数
actionButton() {
this.namebutton.nativeElement.classList.add('class-to-add')
setTimeout(() => {
this.namebutton.nativeElement.classList.remove('class-to-remove')
}, 1000);
}
并调用该函数。
答案 2 :(得分:0)
如果你想改变所有li.myClass,你可以这样做:
请注意容器div中的#questions
。
@ViewChild('questions') questions: any;
questions.nativeElement.querySelectorAll('.myClass').forEach(
question => {
question.classList.remove('myClass');
question.classList.add('newClass');
}
)
<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>
答案 3 :(得分:0)
<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>
答案 4 :(得分:0)
最佳和最简便的方法是:-
如果Student为null,则禁用。在按钮属性中使用此属性。如果您使用引导主题
[ngClass]="{disabled: (students === null) ? true : false}"