基于条件的 Angular 2 点击事件

Question

在我的应用程序中，我想要基于条件的点击事件。

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

在上述代码中，只有当idx>0时才应执行removeSelected函数，你有什么实现的想法吗？

- refactor

Answer 1

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

- yurzui

---

这很简单！将其与[ngClass]="{'icon-disabled': !isIconButtonActivated}"组合使用。 - Guntram

else怎么办？ - tatsu

@tatsu 在这里使用了三元运算符，在这个例子中你可以这样写： (click)="idx > 0 ? removeSelected(item.spId) : somethingElse($event) - KeaganFouche

如果我需要在条件语句中使用 observable 怎么办？ - Idan Yadgar

@IdanYadgar 你尝试使用异步管道了吗？ - Rafael Andrade

警告：这将防止在该元素内部的子元素上触发点击事件。 - Vinez

Answer 2

只需使用三元运算符：

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

只有当条件为真时，它才会调用removeSelected函数，如果条件为假，则不会执行任何操作。

- Chrillewoodz

---

如何使用多个条件进行操作。 <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> - Ragesh Pikalmunde

如果您希望事件执行其默认操作，请将true用作false三元条件结果。例如，如果您的事件是（keydown），并且您希望除TAB键以外的所有键都不执行默认操作，则使用（keydown）=“$ event.keyCode！= 9？doOtherThing（）：true”，或者doOtherThing（）可以只是false。 - Skystrider

@RageshPikalmunde，如何使用单个条件执行多个操作，例如=> (click) =“condition && var1 = true; var2 = true;” 在我的情况下，该条件仅在第一次执行var1 = true时起作用。 - LearningIsNever EndingProcess

Answer 3

我在使用`(click)`中遇到了条件问题，因为我将它与`async`管道结合在一起：

`(click)= flag$ | async ? handler() : false` -> 错误：无法在操作表达式中使用管道 我的解决方案是将`async`管道上移一级：

<ng-container *ngIf="{ value: flag$ | async } as myFlag">
   <button (click)="myFlag.value ? handler() : false">
   </button>
</ng-container>

这里使用 *ngIf 不是用来检查条件，而是仅仅将可观察值保存在一个对象中，以便结果可以被 (click) 使用。

*ngIf="{ value: flag$ | async } as myFlag"

- Alin Ciocan