Question

<div *ngFor="let ticket of filteredTickets | orderBy : 'ResolvedAt';let i = index;" (click)="showTicketDetail(ticket)">
    <div>
        <a >{{ticket.value.IssueNo}}</a>
        <a class="checkbox" (click)="resolvedAndUnResolvedAction($event,ticket.value);">
            <input type="checkbox" id="mark-resolve{{i}}" [checked]="!helper.empty(ticket.value.ResolvedAt)" />
            <label for="mark-resolve{{i}}">Mark as resolved</label>
        </a>
    </div>
</div>

这是我的代码，当我单击复选框时，click函数将被调用两次，是否有任何原因限制两次单击，我已经在函数

中使用了它

resolvedAndUnResolvedAction(event, issue) {
   event.stopPropagation();
   console.log('called');
}

这将在控制台中打印2次

Answer 1

停止两次调用方法并不重要。目的应该是为什么它要打两次电话？

1。

您怎么能说两次通话？您在检查日志并告诉。您是否在其他任何方法中都放置了相同的日志？

2。

您是否也在其父组件中调用了相同的方法，这又触发了此方法。

3。

方法有任何嵌套调用吗？

Answer 2

<div *ngFor="let ticket of filteredTickets | orderBy : 'ResolvedAt';let i = index;" (click)="showTicketDetail(ticket)">
    <div>
        <a >{{ticket.value.IssueNo}}</a>
        <a class="checkbox" (click)="resolvedAndUnResolvedAction($event,ticket.value);">
            <input type="checkbox" id="mark-resolve{{i}}" [checked]="!helper.empty(ticket.value.ResolvedAt)" />
            <label (click)="$event.stopPropagation()" for="mark-resolve{{i}}">Mark as resolved</label>
        </a>
    </div>
</div>

只需在对我有用的标签中添加（click）=“ $ event.stopPropagation（）”

如何限制两次调用我的函数

2 个答案:

1。

2。

3。