2016-09-14 19 views
2

私はAngularを初めて使っていますが、剣道グリッドカラムテンプレートからng-ifイベント(クリック)イベントが機能しない理由を理解できません。Angular2 typecript - 剣道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"); 
} 
} 

答えて

0

(クリック)= "のonClick()" と私はあなたのコードで* ngIfが表示されていない。

は、ここに私のコンポーネントです。イベント名の前後の "()"は、angular2にそのイベントを通知します。

+0

こんにちはJohn、あなたの答えをありがとうが、(クリック)イベントは、コンポーネントの内部にあるメソッドtoggleOrder()に当たっていません。私は

を試しました。 ngifと(クリック)イベントは両方とも機能していません。しかし、onclick = "alert(hello)"と書くとうまくいきますが、html onclcikが動作するのはなぜですか?角度(click)イベントは剣道グリッドの列テンプレートから認識されません。 – Shwetha

関連する問題