如何访问ng2-dragula accept函数内部的组件属性

时间:2018-09-11 13:41:20

标签: angular typescript ng2-dragula

我很确定我在这里做错了什么。我有一个具有dragula模型的简单组件,并且在拖动到它时我不想接受重复项。

为了检查重复项,我想在包的accept函数内使用dragula ngModel绑定数组,该数组是组件属性(personInfoList),但由于它不是参数,因此始终为空。我知道我应该使用目标,但这是一个html元素,并通过它进行查询并搜索是否已存在拖动的元素,效果不是很好。

这是打字稿文件:

export class PersonGroupComponent implements OnInit {

  @Input() templateData: string;
  personInfoList: Array<PersonInfo> = [];
  listGroup: Group;
  constructor(private dragulaService: DragulaService) {
  }

  ngOnInit() {
    this.listGroup = this.dragulaService.find(`personInfoList`);
    this.listGroup.options.removeOnSpill = true;
    this.listGroup.options.copy = (el, source) => { return source.id === 'sidebar' };
    this.listGroup.options.copyItem = (person: PersonInfo) => { return new Person() };
    this.listGroup.options.accepts = (el, target, source, sibling) => {
      console.log(el);
      const draggedElementId: number = parseFloat(el.querySelector('user-mgmt-person').id);
      console.log(draggedElementId);
      if (target.id !== 'sidebar' && !this.isInList(this.personInfoList, parseInt(el.id))) {
        return true;
      }
    };

  }

  personModelChanged(event: Array<PersonInfo>) {
    console.log('person list updated from drag event');
    console.log(event);
  }

   isInList(list: PersonInfo[], id: number): boolean {

   list.forEach(element => {
      if (element.personId === id) {
         return true;
       }
    });
   return false;
  }

为使问题更笼统,除了使用accept函数中的参数外,还有其他方法可以在接受拖动元素时搜索重复项吗?

0 个答案:

没有答案