css - 在 typescript 中添加和删除类

Question

我正在开发一个 angular5 应用程序。我有一个包含问题列表的数组，我通过使用 ngFor 进行迭代来显示它。用户可以通过按 ctrl 键来选择他选择的问题。通过按 ctrl 键选择一个问题后，该问题将显示为已选中(我通过将该问题添加到数组并在迭代时检查特定问题是否在 selectedQuestions 数组中来实现这一点。如果该数组中存在我添加的“事件” ' 类以将其显示为选中状态)。现在我想在用户拖动鼠标拖放问题以重新排序时删除此类(我正在使用 ng2-dragula 进行拖放)。我试过下面的代码

 import {Component, OnInit, ViewChild} from '@angular/core';
 export class SummaryComponent implements OnInit {
 @ViewChild("myLabel") lab;

 addThisQuestionToArray(person: any, i: number, event) {
  if (!event.ctrlKey) {
   this.selectedQuestions = [];
  }
  this.toggleItemInArr(this.selectedQuestions, person);
 }
  toggleItemInArr(arr, item) {
  const index = arr.indexOf(item);
  index === - 1 ? arr.push(item) : arr.splice(index, 1);
 }

 isQuestionSelected(question: any) {
   return (this.selectedQuestions.indexOf(question) !== -1);
 }
 constructor(private dragula: DragulaService){
 }
 ngOnInit() {
 this.dragula
  .drag
  .subscribe(value => { 
      this.dragging =true;  
      console.log("dragging");       
      this.lab.nativeElement.classList.remove("active");
  });
 }
}

summarycomponent.html的HTML代码是

  <li class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.QuestionId"  question.firstName= "i" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myLabel > {{i}} {{question.QuestionId}} {{question.Question}}</li>

Answer 1

您可以使用 ngClass 控制元素的类，并创建一个条件语句，因此如果您像 dragging 这样在本地创建一个变量，并且有一个您想要有条件地应用的类，例如 active

<li class="well" [ngClass]="{'active': dragging}">

或者

<li class="well" [ngClass]=" dragging ? 'active': '' ">