Angular 5中如何在*ngIf条件为真时调用函数？

没问题！当然可以实现当*ngIf条件为true时调用函数的需求，但你写的语法不符合Angular的模板规则，*ngIf只接受返回布尔值的表达式，不支持那种三元分支的写法。下面给你几种实用的方案：

方案一：在*ngIf的条件表达式中封装逻辑 #

你可以把条件判断和函数调用打包到一个组件方法里，然后在*ngIf中调用这个方法：

模板代码 #

<div *ngIf="shouldShowAndExecute(item)">lorem ipsum</div>

组件代码 #

shouldShowAndExecute(item: any): boolean {
  if (item) {
    // 条件满足时触发目标函数
    this.callFunction();
    return true; // 返回true让元素显示
  }
  return false; // 返回false隐藏元素
}

callFunction() {
  // 这里写你要执行的业务逻辑
  console.log("函数已触发！");
}

⚠️ 注意事项：Angular的变更检测会频繁执行*ngIf里的表达式，如果callFunction()包含复杂计算或副作用（比如修改数据、发起请求），这种方法可能导致不必要的重复执行，影响性能。

方案二：利用生命周期钩子监听数据变化 #

更推荐的做法是在组件内部监听item的变化，当它变为真值时自动调用函数，同时保持模板简洁：

模板代码 #

<div *ngIf="item">lorem ipsum</div>

组件代码 #

import { Input, OnChanges, SimpleChanges } from '@angular/core';

// ...

@Input() item: any;

ngOnChanges(changes: SimpleChanges) {
  // 检查item是否发生变化，且当前值为真
  if (changes.item && changes.item.currentValue) {
    this.callFunction();
  }
}

callFunction() {
  // 你的业务逻辑
  console.log("函数在item变为真值时被调用");
}

这种方法避免了模板中频繁调用函数的性能问题，逻辑更清晰，符合Angular的最佳实践。

方案三：结合ng-template的语法糖（适合简单场景） #

如果想在模板中直接处理（仅推荐无副作用的简单逻辑），可以用ng-container配合*ngIf的语法糖：

<ng-container *ngIf="item; then showContent else hideContent"></ng-container>

<ng-template #showContent>
  <!-- 调用函数，注意用{{}}包裹，但同样会触发多次变更检测 -->
  {{ callFunction() }}
  <div>lorem ipsum</div>
</ng-template>

<ng-template #hideContent></ng-template>

同样要注意，这种写法会在每次变更检测时执行callFunction()，只适合轻量逻辑。

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