Angular 2中基于条件的点击事件答案

【问题标题】：Condition based click event in Angular 2Angular 2中基于条件的点击事件
【发布时间】：2017-07-14 06:31:14
【问题描述】：

在我的应用程序中，我希望有基于条件的点击事件，

<div class="trashIconDiv" (click)="if(idx > 0) {removeSelected(item.spId)}">

在上面的代码中 removeSelected 函数应该只在 idx >0 时执行，知道如何实现

【问题讨论】：

标签： angular

【解决方案1】：

(click)="idx > 0 && removeSelected(item.spId)"

【讨论】：

这太简单了！结合[ngClass]="{'icon-disabled': !isIconButtonActivated}"
else 呢？
@tatsu 它使用三元操作数，对于这个例子你可以这样做：(click)="idx > 0 ? removeSelected(item.spId) : somethingElse($event)
如果我需要在条件中使用 observable 怎么办？
警告词，这将阻止元素内子级的点击事件。

【解决方案2】：

只需使用三元：

<div class="trashIconDiv" (click)="idx > 0 ? removeSelected(item.spId) : false">

这只会在条件为真时调用removeSelected函数，如果为假则什么也不做。

【讨论】：

如何在多重条件下做到这一点。 <div class='class1' *ngIf='cndtn != "undefined"' (click)='cndtn1 && cndtn2 then functionToCall()'> <ion-icon class='icon-location'></ion-icon>{{xxxx}} <ion-icon class='icon-arrow-right floatRight iconArrowRight'></ion-icon> </div>
如果您希望事件执行其默认操作，请使用 true 作为 false 三元条件结果。例如，如果您的事件是 (keydown) 并且您希望除 TAB 之外的所有键都不默认，则使用 (keydown)="$event.keyCode != 9 ? doOtherThing() : true" 或 doOtherThing() 可能只是 false .