2

angular5 アプリケーションを開発しています。質問のリストを含む配列があり、ngFor.User を使用して反復して表示しました。ユーザーは、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");
  });
 }
}

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>
4

1 に答える 1