Question

我在Angular2 RC / Ionic2上尝试使用字符串数组中的按钮填充div，并为添加的每个按钮附加点击处理程序。到目前为止，我已成功完成以下任务：

onPageLoaded() {
    array.forEach(function (item){
        let element = document.createElement("button");
        element.setAttribute('id', item);
        element.innerHTML = item;
        let container = document.getElementById("button-container");
        container.appendChild(element);
    }
}

从视觉上看，一切似乎都运转良好。但是，当我尝试使用以下任一方法附加一个单击处理程序时：

element.setAttribute('(click)', myFunction());

或者这个：

element.onclick(myFunction());

按钮不会出现。我注意到这是传统的＆＃34;将对象引入DOM的方法。有没有一种Angular方式可以做到这一点？

Answer 1

在Angular2中你不是这样做的，这根本不起作用。对于以任何方式动态添加的HTML，Angular不会处理（解析()，[]，{{}}绑定或实例化组件或指令）。

Angular方式就像

<div id="button-container">
  <button *ngFor="let item of array" [attr.id]="item" (click)="myFunction(item)">{{item}}</button>
</div>

<div id="button-container">没有必要，我刚刚添加它，因为它已在你的问题中提到过。

Answer 2

我会利用关联的模板来做到这一点，而不是直接在DOM上工作（Angular2会为你做到这一点）：

<template ngFor [ngForOf]="array" #element>
  <button (click)="myFunction($event)" [innerHTML]="element"></button>
</template>

不一定需要使用desugared表达式，但取决于您期望的输出。你可以直接拥有以下内容：

<button *ngFor="let element of array"
   (click)="myFunction($event)" [innerHTML]="element"></button>

此外我不知道你在element变量中有什么，但如果它不是HTML，你可以直接使用插值，如下所述：

<button *ngFor="let element of array"
   (click)="myFunction($event)" [attr.id]="element">{{element}}</button>

Angular 2：将组件填充到模板中

2 个答案: