Question

我对Angular 4有一个非常奇怪的问题。

使用此代码：

组件：

    productFlavors {
    free {
        applicationId 'com.company.app.free'
    }
    paid {
        applicationId 'com.company.app.paid'
    }
}

模板：

export class ExampleComponent {

    ...

    public toggleDropdown() {
        this.showDropdown = !this.showDropdown;
    }

    public runClickEvent(e) {
        console.log('click event ran');
    }
}

由于某些原因，如果<button class="btn btn-link btn-lg" (click)="toggleDropdown()" (blur)="toggleDropdown()" [ngClass]="{ 'open': showDropdown }"> <i class="fa fa-ellipsis-h"></i> </button> <div class="dropdown" [@ngBodySlider] *ngIf="showDropdown"> <ul class="list-unstyled"> <li> <a href="javascript:" (click)="runClickEvent($event)"> <div class="list-icon"> <i class="fa fa-object-ungroup"></i> </div> <span>Run Event</span> </a> </li> </ul> </div>隐藏(click)，则下拉列表中的<div.dropdown>功能无法绑定，但是，如果我删除了*ngIf，{ {1}}函数运行得很好。

我知道这是可能的，因为我在我的代码的其他部分使用相同的想法，所以我不知所措。我不知道为什么这不会绑定在*ngIf内。

任何想法都会受到赞赏，因为这让我发疯：）

Answer 1

好的，我只想出来......

这是因为按钮上的（模糊）事件。当我单击下拉列表中的链接时，模糊在（单击）事件之前执行，因此在执行之前将其解除绑定。

通过删除按钮上的（模糊）事件，我可以在下拉列表中获取（点击）事件以使其正常工作。

Angular 4：（click）函数不绑定在* ngIf中

1 个答案: