Angular中能否在HTML元素内仅执行两个函数中的一个？

当然可以，但你给出的写法存在问题。要实现“根据条件仅运行两个函数中的一个”，需要用正确的条件判断语法，以下是几种可行的方案：

• 使用三元运算符（完整判断）
  三元运算符需要明确的布尔条件，格式为条件 ? 真时执行 : 假时执行。如果aFunction()本身返回布尔值作为判断条件，正确写法如下：

  <Button (click)="aFunction() ? anotherFunction() : someOtherFunction()">Hi</Button>
  

  如果只需要满足条件时执行函数，不满足时无操作，可以把冒号后设为void 0：

  <Button (click)="aFunction() ? anotherFunction() : void 0">Hi</Button>
  

• 使用逻辑与（短路判断）
  如果你需要先执行aFunction()，再根据它的返回结果决定是否执行anotherFunction()，可以用逻辑与运算符：

  <Button (click)="aFunction() && anotherFunction()">Hi</Button>
  

  逻辑：先执行aFunction()，若返回true则继续执行anotherFunction()，返回false则停止执行。

• 封装逻辑到组件方法（推荐）
  当逻辑复杂时，更建议把判断逻辑封装到组件的TS方法中，让HTML代码更简洁易维护：
  组件类中定义方法：

  handleButtonClick() {
    if (this.yourCondition) { // 这里替换成你的判断条件
      this.aFunction();
    } else {
      this.anotherFunction();
    }
  }
  

  HTML中调用：

  <Button (click)="handleButtonClick()">Hi</Button>
  

内容的提问来源于stack exchange，提问作者Windows