如何从li级别隐藏父ul?

Question

html component

<div class="select-wrapper select">
<input (click)="manageOptionsView()" type="text" class="select-dropdown" data-activates="select-options-524f0174-3e9b-445a-8bf3-e304572eb476" value="Choose your option">
<ul [ngStyle]="clickedSelect == true ? {'display':'block'} : {'display':'none'}" id="select-options-524f0174-3e9b-445a-8bf3-e304572eb476" class="dropdown-content select-dropdown">
<li class="disabled"><span class="filtrable">Choose your option</span></li>
<li class="" *ngFor="let option of options" (click)="changeValue(option); manageOptionsView();"><span class="filtrable">{{option}}</span></li>
</ul>
</div>

TS 组件

import { Component, OnInit, ElementRef, HostListener, Input, Output } from '@angular/core';
@Component({
selector: 'app-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.scss'],
})
export class SelectComponent implements OnInit {
clickedSelect: boolean = false;
clickedOutside: boolean = false;
@Input() options: any[];
@Output() selectedOption: any = null;
constructor(private _eref: ElementRef) { }
ngOnInit() {
}
@HostListener('document:click', ['$event'])
clickout(event) {
if (this._eref.nativeElement.contains(event.target)) {
this.clickedSelect = true;
} else {
this.clickedSelect = false;
}
}
manageOptionsView() {
this.clickedSelect = !this.clickedSelect;
}
changeValue(value) {
this.selectedOption = value;
}

}

正如您在单击输入时所看到的，ul 将显示从无更改为阻止，当单击元素外部时，ul 元素隐藏(从块到无(。好的，这些功能有效，但是当单击li元素ul时不会改变显示，为什么？

Answer 1

它应该隐藏吗？ 如果是，那么您可以像manageOptionsView()一样做同样的事情。 设置clickedSelect属性。

Answer 2

它只是一个简单的修复，

将changeValue()更改为以下代码

changeValue(value) {
event.stopPropagation();
this.clickedSelect = !this.clickedSelect;
this.selectedOption = value;
}

查看堆栈闪电战片段