模板中的Angular2调用方法答案

【问题标题】：Angular2 Call method in Template模板中的Angular2调用方法
【发布时间】：2023-03-21 16:56:01
【问题描述】：

如何在模板中调用服务的方法来创建动态表或其他应该是动态 HTML 的东西？我尝试使用带有{{anyservice.getDynamicTable(param)}} 的双花括号，但这不起作用。正确执行此操作的方法是什么？

【问题讨论】：

什么是动态表？

标签： html angular dynamic

【解决方案1】：

您应该准备要在控制器中显示的数据。

这意味着你应该

从控制器调用服务，
创建数据表，
把它放在一个局部变量中，然后
从模板中引用这个变量。

例如

dynamicTable: any;

ngOnInit() {
    this.dynamicTable = this.anyservice.getDynamicTable();
}

或带参数

createDynamicTable(param) {
   this.dynamicTable = this.anyservice.getDynamicTable(param);
}

【讨论】：

是否有解决方案只为故意这样做？因为如果我在onInit 中生成它，我可能没有那里的数据，或者如果我加载新数据，我将不得不调用该函数。
我刚刚意识到我可以在我收到的 Observable 的 onComplete 中调用它。这解决了我的问题。非常感谢。

【解决方案2】：

组件内部定义的函数可以使用绑定事件在模板中调用。

<button (click)="methodName()">Label</button>
<select (change)="methodName()"></select>

与在 Angular1 中您需要使用预定义的指令（如 ng-click）来绑定这些函数不同，在 Angular2 中您调用的所有原生 JavaScript 事件都使用此语法。

编辑
如果您有迭代或动态生成的数据：

<ul>
    <li *ngFor="let item of items; let i = index">
        <button (click)="methodName1(i)">Label</button>
        <button (click)="methodName2(item)">Label</button>
    </li>
</ul>

如您所见，您可以传递数字、字符串、布尔值甚至整个对象。

【讨论】：

这是我已经用于用户交互的，但现在我只需要在我的应用程序启动时生成一个动态表，我不知道如何。
@moessi774 如果你在内部使用这个组件或者属性被定义为公共的，那么你可以访问包含这个方法的内部组件。其他参数如ids 或indexes 可以不带花括号传递
@moessi774 我添加了更多细节
@moessi774 如果你需要不同的方法而不是传递参数，你需要使用 ngIf 条件和不同的元素
感谢您的回答。问题是直接在模板中生成表格对我来说似乎很复杂。我宁愿在外部函数中执行它并在以后的迭代中更改它，因为我不确定如何准确地执行它。