时间戳

首页 > 解决方案 > 添加事件侦听器在动态（*ngFor）创建的元素中不起作用

html - 添加事件侦听器在动态（*ngFor）创建的元素中不起作用

问题描述

我正在尝试扩展这个手风琴视图。

每当单击部分按钮时，此userSelection[i].addEventListener..事件侦听器都会使id 变为“开放”。所以手风琴得到扩展。

当我不使用时，这工作正常*ngFor。如果我使用*ngFor指令 addEventListener 不起作用。

附上图片供参考

不工作的 HTML 代码：

<div class="accordian" id='accordian'>
        <section class="section">
            <div class="section1" *ngFor='let m of data.accordian.printers'>
                <button class="accordion" (click)='modelpop()'>{{m.type}}
                            <i class="fa fa-angle-right closearrow" id='arrowshow'></i>
                            <i class="fa fa-angle-down openarrow" id='arrownotshow'></i>
                    </button>

                <div class="panel" id='close'>
                    <p>menu 1</p>
                    <p>menu 2</p>
                    <p>menu 3</p>
                    <p>menu 4</p>
                </div>
            </div>

CSS 代码：

 #close {
    max-height: 0;
    overflow: hidden;
}

.accordian {
    position: absolute;
    background: rgb(244, 244, 244);
    top: 140px;
    left: 10px;
    width: 95%;
    box-shadow: 0 0 20px 2px #00000085;
    padding-bottom: 20px
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 25px;
    width: 250px;
    border: none;
    outline: none;
    border-radius: 10px;
    font-family: "Montserrat";
    font-weight: bolder
}

输入脚本：

ngOnInit(){    
var userSelection = document.getElementsByClassName("accordion");
    var pane = document.getElementsByClassName('panel');

     for (let i = 0; i < userSelection.length; i++) {
    userSelection[i].addEventListener("click", function () {
    if (pane[i].id == 'open') {
              pane[i].id = 'close';

            } else {
              pane[i].id = 'open';

            }
    })
    }

}

工作正常的HTML代码：

 <section class="section">

    <div class='section1'>
        <button class="accordion" (click)='modelpop()'>Section 1
            <i class="fa fa-angle-right closearrow" id='arrowshow'></i>
            <i class="fa fa-angle-down openarrow" id='arrownotshow'></i>
        </button>

        <div class="panel" id='close'>
            <p>menu 1</p>
            <p>menu 2</p>
            <p>menu 3</p>
            <p>menu 4</p>
        </div>
        <div class='section1'>
            <button class="accordion" (click)='modelpop()'>Section 1
                <i class="fa fa-angle-right closearrow" id='arrowshow'></i>
                <i class="fa fa-angle-down openarrow" id='arrownotshow'></i>
            </button>

            <div class="panel" id='close'>
                <p>menu 1</p>
                <p>menu 2</p>
                <p>menu 3</p>
                <p>menu 4</p>
            </div>
        </div>

标签： htmlangulartypescript

解决方案

我创建了一个简单的解决方案，可以在点击时切换元素的可见性。

您不需要编写这么多代码，只需为绑定到列表的数组中的每个项目维护一个可见性标志，并在每次单击时切换该标志。

示例位于https://stackblitz.com/edit/angular-toggle-options

它也有一点animations。animations您可以通过从组件装饰器中删除属性并从模板中触发动画来摆脱它

推荐阅读