Angular2布尔范围问题

我试图在Angular2中使用AngularCLI v1.0.0和angular 2.4.10进行基本选择，但问题是选择选项时isOpen变量不会切换，从而关闭菜单

BasicSelect.ts
@Component({
  selector: 'basic-select',
  templateUrl: './basic-select.component.html',
  styleUrls: ['./basic-select.component.less']
})
export class BasicSelect implements OnInit, OnDestroy {
  // Input is populated from an outside component after an http call
  @Input()
  selectOptions:Array<any>;
  // 
  @Input()
  selectedOption:BehaviorSubject<any>;

  public isOpen:boolean;

  public constructor() {
    this.isOpen = false;
  }
  //THIS WORKS
  public toggleDropdown():void {
    this.isOpen = !this.isOpen;
  }
  //THIS DOESN'T WORK
  public selectOption(opt):void {
    this.isOpen = false;
    this.selectedOption.next(opt);
  }
}


BasicSelect.html
<div class="dropdown_container" (click)="toggleDropdown()" [ngClass]="{ 'show': isOpen }">
  <dl>
    <dt><span>{{selection}}</span></dt>
  </dl>
  <ul class="dropdown_items">
    <li *ngFor="let option of selectOptions" (click)="selectOption(option)">
      <span>{{option}}</span>
    </li>
  </ul>
</div>

BasicSelect.ts
@组成部分({
选择器：“基本选择”，
templateUrl:'./basic select.component.html'，
样式URL:['./basic select.component.less']
})
导出类BasicSelect实现OnInit、OnDestroy{
//http调用后，从外部组件填充输入
@输入（）
选择选项：数组；
// 
@输入（）
选择选项：行为主体；
公共等参线：布尔；
公共构造函数（）{
this.isOpen=false；
}
//这很有效
公共切换下拉列表（）：void{
this.isOpen=！this.isOpen；
}
//这不管用
公共选择选项（opt）：无效{
this.isOpen=false；
this.selectedOption.next（opt）；
}
}
BasicSelect.html
{{selection}}


{{option}}

问题是，如果我单击下拉容器，效果就像一个符咒，但当实际选择一个选项时，组件看不到isOpen更改。

执行以下操作：

public selectOption(event, opt):void {
    event.stopPropagation()
    this.isOpen = false;
    this.selectedOption.next(opt);
  }

这是因为，当您单击

li

元素时，您触发了两个单击功能。一个在

li

上，第二个在外部

div

上。因此，

event.stopPropagation（）

将停止click事件的传播。只需单击一次即可触发

更多地了解它

---

希望能有所帮助。：-）

一旦尝试使用

event.stopPropagation（）

内部

selectOption（）

。我认为这是实际的问题。我在toggleDropdown函数中尝试过这样做，并且还强制从changeDetectorRef执行detectChanges（），但结果是一样的。好的。我是在selectOption中完成的，现在可以工作了。我不明白为什么在

selectOption（）

中出现

event.stopPropagation（）

。一旦尝试，事件将从selectOption传播到下拉列表容器，因此也调用了toggleDropdown（）函数。谢谢你的快速解决！