Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/opencv/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 在typescript中添加和删除类_Css_Angular_Typescript_Ng2 Dragula - Fatal编程技术网

Css 在typescript中添加和删除类

Css 在typescript中添加和删除类,css,angular,typescript,ng2-dragula,Css,Angular,Typescript,Ng2 Dragula,我正在开发angular5应用程序。我有一个包含问题列表的数组,通过使用ngFor进行迭代来显示它。用户可以按ctrl键选择自己选择的问题。按ctrl键选择一个显示为选中的问题后(我将该问题添加到一个数组中,并在迭代时检查selectedQuestions数组中是否有相应的问题。如果该数组中有相应的问题,我会添加一个“active”类以将其显示为选中).现在我想在用户拖动鼠标拖放问题以重新排序时删除该类(我使用ng2 dragula进行拖放)。我已经尝试了以下代码 import {Compon

我正在开发angular5应用程序。我有一个包含问题列表的数组,通过使用ngFor进行迭代来显示它。用户可以按ctrl键选择自己选择的问题。按ctrl键选择一个显示为选中的问题后(我将该问题添加到一个数组中,并在迭代时检查selectedQuestions数组中是否有相应的问题。如果该数组中有相应的问题,我会添加一个“active”类以将其显示为选中).现在我想在用户拖动鼠标拖放问题以重新排序时删除该类(我使用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");
  });
 }
}
HTML代码summarycomponent.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>
  • {{{question.QuestionId}{{{question.question}}

  • 您可以使用ngClass控制元素的类,并创建一个条件语句,因此如果您在本地创建一个变量,如拖动
    ,并且有一个类要有条件地应用,如活动

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

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

  • 你的问题很难理解。你能描述一下你想要实现什么,什么不起作用,甚至可能添加一些屏幕截图/更多代码吗?目前我正在使用[class.active]=“isQuestionSelected(question)”来知道传递的问题是否被选中,以知道它是否处于活动状态。通过简单地使用一个变量拖动,我如何设置列表中每个项目的值是活动的还是不活动的,这为我节省了很多时间!