Question

我想在我的html模板中从一组对象中动态生成按钮，如下所示：

打字稿

private buttons: ButtonType[] = [];

ngOnInit(){

    let button: ButtonType = new ButtonType();

    button.name = "HOMEPAGE";
    button.clazz = "btn-blue";
    button.action = "goHome()";
    this.buttons.push(button);
  }

private goHome() {
    this.router.navigate(["/"]);
  }

HTML

<button *ngFor="let b of buttons" type="button" [class]="b.clazz" (click)="b.action">{{b.name}}</button>

除action部分外，似乎无效。它不会在(click)部分呈现。有没有一种绑定方式可以将b.action参数解释为方法，就像我在(click)="goHome()"页面内写html一样？

Answer 1

您只需要：

将button.action = "goHome()";更改为button.action = "goHome";

和

(click)="b.action"至(click)="this[b.action]()"

<强> WORKING DEMO

Answer 2

此时您正在传递函数名称，而不是函数/引用。

您需要做的是：

button.action = goHome()

您还可以传递匿名函数：

button.action = function(){console.log('function called');}

通过执行此操作，您会将引用传递给您的模板到给定的函数，该函数将在单击按钮后调用。

Answer 3

进行以下更改：

//Components
button.action = this.goHome

//View
(click)="b.action()"

将按钮操作作为参数

3 个答案: