在没有点击事件的情况下在 HTML 中调用 TypeScript 函数答案

【问题标题】：Call TypeScript function in HTML without a click event在没有点击事件的情况下在 HTML 中调用 TypeScript 函数
【发布时间】：2019-05-29 21:22:28
【问题描述】：

我知道在单击按钮时如何调用 TypeScript，但是如何在没有该类型事件的情况下调用函数呢？当我填充了一个名为 chartData 的数组时，我想调用一个函数。这就是我所拥有的：

        <div *ngIf="chartData.length">
            chartMethod();
        </div>

但不是调用chartMethod()，它只是在html页面上打印'chartMethod()'。

我也试过了：

            <script> 
                chartTest();
            </script>

但该函数仍未被调用。

【问题讨论】：

【解决方案1】：

这是因为 chartTest() 被 Angular 封装，在 Angular 之外无法访问。但是在 Angular 中你可以，你只需要：

<div *ngIf="chartData.length">
    {{chartMethod()}}
</div>

但它会在 html 中添加一个未定义的所以只是测试

<div *ngIf="chartData.length">
    {{chartMethod() ? chartMethod() : ""}}
</div>

但我不认为它是html resposibillity call任何方法，它需要由组件本身在typescript中完成。

【讨论】：

【解决方案2】：

Angular 2，您可以通过在 [ngClass] 中传递方法 'checkFieldAccess()' 来自动调用方法在模板文件中写这个

 [ngClass]="{check:checkFieldAccess(dataPass)}"

【讨论】：

【解决方案3】：

在你的 component.ts 中放他的 after 构造函数

ngAfterViewInit(){
    this.getUser();//Put here your function or what you need
  }

ngAfterViewInit() 在组件视图及其子视图创建后调用。它是一个生命周期钩子，在组件的视图完全初始化后调用。

【讨论】：