Question

我想删除＆＃39;有效＆＃39;从文档单击下拉列表中选择一个选项后的类。我可以通过单击文档来删除它，但是在选择选项时我仍然坚持如何删除它。

TS：

ngAfterViewInit() {
        const elem = this.element.nativeElement.querySelector('select');
        const option_elem = this.element.nativeElement.querySelectorAll('option');
        this.renderer.listen(document.body, 'click', (event) => {
            if (event.target == elem) {
                this.addClass(elem, 'active');
            }
            else {
                this.removeClass(elem, 'active');
            }
        });

        for(var i=0; i<=option_elem.length; i++){
             this.renderer.listen(option_elem, 'click', (event) => {
                 this.removeClass(elem,'active');
             });
         }
    }

HTML：

<div class="dropdown">                
    <select class="dropdown-menu" aria-labelledby="dropdownMenuButton" name="menu" id="menu">
         <option class="dropdown-item" *ngFor="let item of selectOption" [value]="item.value"> {{item.label}}</option>
    </select>
</div>

任何帮助将不胜感激。谢谢！

Answer 1

不要强制要求添加和删除类。让角度为你工作并使用数据绑定。在select上使用[class.active]绑定与[(ngModel)]结合使用。

component.html

<div class="dropdown">                
  <select class="dropdown-menu" aria-labelledby="dropdownMenuButton" name="menu" id="menu" [(ngModel)]="selected" [class.active]="selected === null">
    <option class="dropdown-item" *ngFor="let item of selectOption" [value]="item.value"> {{item.label}}</option>
  </select>
</div>

component.ts

selected = null;

Answer 2

将option_element更改为option_element[i]，因为option_element是此处的数组。

for(var i=0; i<=option_elem.length; i++){
  this.renderer.listen(option_elem[i], 'click', (event) => {
     this.removeClass(elem,'active');
  });
}

从Angular 2中的下拉列表中删除活动类

2 个答案: