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

Question

我想在单击文档并选择一个选项后立即从下拉列表中删除 'active' class。我可以在单击文档时将其删除，但我仍然不知道如何在选择一个选项时将其删除。

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

把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');
  });
}

Answer 2

不要强制处理添加和删除类。让 angular 为您完成工作并使用数据绑定。在 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;

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

Remove active class from dropdown in Angular 2

css

drop-down-menu

typescript

angular2-template

angular