单击时关闭的可悬停下拉菜单

Question

我有3个下拉菜单，我使用*ngFor在angular+2中显示它们但我有一个问题，设置所有这些关闭项目点击

单击时不关闭

HTML代码

<div *ngFor="let filter of Filters ; let i = index">
<span class="dropdown">
<span class="filter">
{{ currentFilter[i] }}
</span>
<div class="dropdown-content">
<div class="item" *ngFor="let filterType of filter" (click)="
currentFilter[i] = filterType;
onFilter();
">
{{ filterType }}
</div>
</div>
</span>
</div>

CSS

.dropdown-content {
padding: 8PX;
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
border-radius: 8px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.26);
width: 100%;
font-size: 14px;
font-weight: 900;
.item {
position: relative;
background-color: Transparent;
padding: 12px;
font-size: 16px;
font-weight: 500;
}
.item:hover{
background-color: #e7eaeb;
border-left: 3px solid red;
font-weight: 900;
}
}
.dropdown:hover 
.dropdown-content {
display: block ;
}

ts

currentFilter: Array<string> = ['ALL', 'ALL', 'ALL', 'ALL'];
Filters : Array<Array<string>> = [
// offers_type =
[
'ALL',
'DISCOUNT',
'FREE_DELIVERY',
'FREE_ITEMS',
],
// activity =
[
'ALL',
'ACTIVE_WITH_IN_TIME',
'ACTIVE_OUT_OF_TIME',
'NOT_STARTED',
'ENDED',
],
// visibility =
['ALL', 'VISIBLE', 'HIDDEN'],
];

我尝试按id定位下拉内容，并在单击和悬停时更改样式但这在*ngFor 中多次下降时效果不佳

以下是我尝试的

点击关闭

<div *ngFor="let filter of Filters ; let i = index">
<span class="dropdown">
<span 
id=i
class="filter">
{{ currentFilter[i] }}
</span>
<div class="dropdown-content"
onmouseover="document.getElementById(i).style.display='block';"
>
<div class="item" 
*ngFor="let filterType of filter" 
(click)="
currentFilter[i] = filterType;
onFilter();"
onClick="document.getElementById(i).style.display='none';"
>
{{ filterType }}
</div>
</div>
</span>
</div>

但我一直收到这个错误

Uncaught TypeError: Cannot read property 'style' of null
at HTMLDivElement.onmouseover
Uncaught TypeError: Cannot read property 'style' of null
at HTMLDivElement.onclick 

请注意，当使用固定id 定位单个下拉列表时，此代码运行良好

编辑：

添加ngFordiv

Answer 1

通过您得到的错误，我可以看出您的代码中有一个错误。

您已经编写了以下代码：

<div class="dropdown-content" onmouseover="document.getElementById(i).style.display='block';">

JavaScript会将i视为一个变量，因为它不是以文本形式编写的。您应该将撇号与i:一起使用

<div class="dropdown-content" onmouseover="document.getElementById('i').style.display='block';">

Answer 2

我已经使用下面编辑的代码修复了这个问题在ts文件中

onMouseOver(i){
document.getElementById(`dropdown-content-${i}`).style.display='block';
}
onClick(i){
document.getElementById(`dropdown-content-${i}`).style.display='none';
}

在HTML文件中

<div *ngFor="let filter of Filters ; let i = index">
<div>
<span class="filter-label">
{{ FiltersLabels[i] | translate }}
</span>
<span class="dropdown">
<span 
class="filter"
(mouseover)='onMouseOver(i)'>
{{ currentFilter[i] }}
</span>
<div
id='item-{{i}}'
class="dropdown-content"
>
<div class="item" 
*ngFor="let filterType of filter" 
(click)="
currentFilter[i] = filterType;
onFilter();
onClick(i)
">
{{ filterType }}
</div>
</div>
</span>
</div>
</div>

但我仍然不知道为什么能起作用