Angular2打字稿 - kendo ui网格栏模板（单击）不起作用

我是Angular的新手，不明白ng-if和（click）事件为什么不能在kendo网格栏模板中工作。Angular2打字稿 - kendo ui网格栏模板（单击）不起作用

我想要一个按钮，需要有条件地可见，并点击我需要导航到其他页面在水疗中心。使用命令我无法动态处理基于单元值的可视性。所以，选择了模板，但模板点击事件不起作用。

这里是我的组件：

import { Component, Output, Input } from '@angular/core'; 
import { ReplaySubject } from 'rxjs/Rx'; 
import { ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated'; 

import { TWCGridComponent, PanelComponent } from 'infrastructure.export'; 
import { IssueDTO } from 'issue.webmodel.export'; 

import { IssueBusinessService } from '../../webBL/issue.business.service'; 

declare var $: any, moment: any; 

@Component({ 
selector: 'twc-issue-list', 

templateUrl:     'webApp/issueDetail/Shared/sections/issueList/issue.list.template.html', 
directives: [ROUTER_DIRECTIVES, TWCGridComponent, PanelComponent], 
viewProviders: [], 
styles: [` 
    :host { display: block; } 
`] 
}) 

export class IssueListComponent { 
dataSource: Array<IssueDTO> = []; 
gridOptions: kendo.ui.GridOptions; 
child: JQuery; 
// private $el: JQuery; 
@Output() knownIssuesCount: ReplaySubject<{}> = new ReplaySubject(1); 
@Input() set searchParams(params: any) { 
    if (params) { 
     this.initSearch(params); 
    } 
} 
constructor(private issueBusinessService: IssueBusinessService, 
    private router: Router 
) { 
    this.gridOptions = { 
     sortable: false, 
     scrollable: false, 
     columns: [ 
      { 
       field: "id", title: "Issue ID/Status/Summary", width: "40%", 
       template: ` 
        <div class="cellLine">#:id# \/ <span class='status #:statusName.toLowerCase().replace(/ /g, '')#'>#:statusName.toUpperCase()#</span></div> 
        <div class="cellLine">#:title#</div>` 
      }, 
      { 
       field: "category", title: "Category/Type", width: "30%", 
       template: ` 
        <div class="cellLine">#:primaryIssueCategoryName#</div> 
        <div class="cellLine">#:primaryIssueCategoryTypeName#</div> 
       ` 
      }, 
      { 
       field: "updateTime", title: "Created/Updated", width: "20%", 
       template: this.gridFormatters.lastUpdate 
      }, 
      { 
       field: "command", hidden: false,     
       template: `<div><button type="button" onclick="toggleOrder()" class='btn btn-rounded #:readAllowed# icon-twc-08'</button></div>`     
    }; 
    /* tslint:disable */ 
    function toggleOrder() { 
     alert("hey"); 
    } 
    /* tslint:enable */  
} 
toggleOrder() { 
    alert("hey"); 
} 
}

来源

2016-09-14 Shwetha

你需要使用（点击）= “点击（）”，我没有看到一个* ngIf在你的代码。事件名称周围的“（）”告诉angular2其事件。

来源

2016-09-14 14:59:08

嗨，约翰，感谢您的回答，但（点击）事件没有触及组件内部的方法toggleOrder（）。我试过

。 ngif和（click）事件都不起作用。但是当我写onclick =“alert（hello）”它确实工作，所以我想知道为什么HTML onclcik工作，但角度（点击）事件是从剑道网格的列模板识别。 – Shwetha

Angular2打字稿 - kendo ui网格栏模板（单击）不起作用

回答

相关问题