我正在开发一个 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");
});
}
}
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>