模板中的Angular2调用方法

Question

如何在模板中调用服务方法来创建动态表或其他应该是动态HTML的东西？我尝试使用{{anyservice.getDynamicTable(param)}}的双卷曲括号，但这不起作用。有什么方法可以正确地做到这一点？

Answer 1

可以使用绑定事件在模板中调用

组件内定义的函数。

<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>

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

Answer 2

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

这意味着你应该

1. 从您的控制器调用该服务，
2. 创建数据表，
3. 将其放入局部变量然后
4. 从模板中引用此变量。

例如

dynamicTable: any;

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

或使用param

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