如何在 Angular2 的模板指令中使用 html？答案

【问题标题】：How do I use html in Template directive in Angular2?如何在 Angular2 的模板指令中使用 html？
【发布时间】：2016-10-24 16:05:15
【问题描述】：

目前我想在模板中有一个可点击的锚标记来显示一条消息。但是，在运行期间，我不断收到此错误。

Uncaught ReferenceError: display is not defined

我的代码如下：

prepareKendoGrid(searchresults:any[]) {
    console.log(this.searchresults);

    this.adhocSearchKendoGrid = {
        sortable: true,
        columns: [{
            field: "filename",
            title: " ",
            width: 50,
            template: "#if(filetype == 'xml') {#<i style='margin-left:10px' class='fa fa-file-code-o fa-1x'></i>#} else if(filetype == 'doc') {#<i style='margin-left:10px' class='fa fa-file-word-o fa-1x'></i>#} else if(filetype == 'pdf') {#<i style='margin-left:10px' class='fa fa-file-pdf-o fa-1x'></i>#}else if(filetype == 'txt') {#<i style='margin-left:10px' class='fa fa-file-text-o fa-1x'></i>#}#"
        },
        {
            field: "filename",
            title: "File Name",
            width: 200
        },
        {
            field: "content",
            title: "Content"
        },
        {
            field: "start_time",
            title: "Conversation Date",
            width: 200
        },
        {
            field: "attachments.count",
            title: "Attachments",
            width: 100,
            template: "<a style='margin-right:10px' (click)='display()'><i class='fa fa-paperclip fa-fw'></i></a>#: attachments.count #"
        }],
        dataSource: searchresults
    };

    let cst = new CSTGridComponent();
    cst.createGrid(this.adhocSearchKendoGridId,this.adhocSearchKendoGrid);
}

display() {

    console.log('ok');
    }
}

【问题讨论】：

标签： javascript html angular typescript onclick

【解决方案1】：

应该是

(click)='display()'

另见

http://learnangular2.com/events/

【讨论】：

不幸的是，当我这样做时，什么也没有发生。是有这样的原因还是因为在模板指令中没有找到这样的方法？
我没有仔细查看您的其他代码，但我看到的没有多大意义（tempalte: ... 行除外）那应该做什么？你在哪里有这个代码？您能否在问题中添加更多代码以更清楚地说明您要完成的工作？
困难，因为点击不会被 Angular 处理。 “这里不需要ngFor”听起来很奇怪。 *ngFor 不重。在 Angular2 中，您应该努力让 Angular2 更新 DOM，并且在您的代码中只更新数据并让 *ngIf、*ngFor、*ngSwitchCase、[]、{{}}` 更新 DOM。
说得好！感谢您对此的帮助。将尝试按照您所说的进行。
如上所述。 Angular 不关心动态添加的 HTML。如果(click)="xxx" 和{{yyy}} 和[prop]="val" 没有被静态添加到组件模板中，它们将不会做任何事情。如果你真的需要动态添加它，你可以使用stackoverflow.com/questions/34784778/…