Angular2 typescript - kendo ui 网格列模板（单击）不起作用

Question

我是 Angular 的新手，不明白为什么 ng-if 和 (click) 事件在 kendo 网格列模板中不起作用。

我想要一个需要有条件可见的按钮，单击时我需要导航到 spa 中的其他页面。使用命令我无法根据单元格值动态处理可见性。所以，选择了模板，但是模板点击事件不起作用。

这是我的组件：

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");
}
}

Answer 1

您需要使用 (click)="onClick()" 并且我在您的代码中没有看到 *ngIf。事件名称周围的“()”告诉 angular2 它是一个事件。