Question

这是以前的工作。我的HTML有什么问题导致它停止工作吗？下拉列表无法打开。我也试过$('.ui.dropdown).dropdown();菜单会显示为.1秒然后消失。

<div class="list card ui">

    <div class="info">
        <div class="ui grid">
            <div class="three wide column">
                <div class="content">
                    <h4 class="ui image header"> {{product.name}} </h4>
                    <div class="sub header"> Product Number: {{product.productNumber}} </div>
                </div>
            </div>
            <div class="four wide column"> {{ product.client.name }} </div>
            <div class="one wide column"> {{ product.currentStatus.name }} </div>
            <div class="one wide column"> {{ sendInvoice }} </div>
            <div class="one wide column"> {{ approvalInvoice }} </div>
            <div class="two wide column"> {{ orderMail }} </div>
            <div class="two wide column"> {{ product.productPrice | number: '1.0-0' }} </div>
            <div class="two wide column"> {{ product.outSourcePrice | number: '1.0-0' }} </div>
        </div>
    </div>

    <div class="list-actions" (click)="$event.stopPropagation()">
        <div class="ui icon top right pointing dropdown">
            <i class="ellipsis horizontal icon"></i>
            <div class="menu">
                <div class="item" (click)="onView()"><i class="eye icon"></i> View </div>                    
                <div class="item" (click)="onEdit()"><i class="write icon"></i> Edit </div>
                <div class="item" (click)="onDelete()"><i class="trash icon"></i> Delete </div>
            </div>
        </div>
    </div>
    
</div>

Answer 1

我在 ngOnInit（）方法中添加了$('.ui.dropdown').dropdown();

Answer 2

没有测试（不使用语义ui），我认为你在错误的地方使用停止传播。你把它放在包装下拉列表的div中，因此下拉列表没有得到事件。您应该将停止传播移动到下拉列表中，如下所示：

<div class="list-actions">
        <div class="ui icon top right pointing dropdown" (click)="$event.stopPropagation()">
            <i class="ellipsis horizontal icon"></i>
            <div class="menu">
                <div class="item" (click)="onView()"><i class="eye icon"></i> View </div>                    
                <div class="item" (click)="onEdit()"><i class="write icon"></i> Edit </div>
                <div class="item" (click)="onDelete()"><i class="trash icon"></i> Delete </div>
            </div>
        </div>
    </div>

$ event.stopPropagation（）在Angular 2中不起作用

2 个答案: