单击标签时单击监听器 - angular2和ng bootstrap

我有以下的html代码片段。我正在使用angular2，ng-bootstrap ng选项卡。我的问题是，如何在点击标签时调用方法点击？我加了（点击），但是我看到fetchNews（）方法在我点击标签时根本没有被调用。我究竟做错了什么？单击标签时单击监听器 - angular2和ng bootstrap

<ngb-tab title="Active" (click)="fetchNews('active')"> 
    <ng-template ngbTabContent> 
     <table class="table table-sm table-striped"> 
     <thead> 
     <tr> 
      <th>Title</th> 
      <th>Description</th> 
      <th>Attachment</th> 
      <th>Start Date</th> 
      <th>End Date</th> 
      <th>Actions</th> 
     </tr> 
     </thead> 
     <tr *ngFor="let item of news"> 
      <td>{{item.title}}</td> 
      <td>{{item.description | ellipsis:25}}</td> 
      <td>{{item.attachmentUrl | ellipsis:25}}</td> 
      <td>{{item.startDate | date: 'MM/dd/yyyy hh:mm a'}}</td> 
      <td>{{item.endDate | date: 'MM/dd/yyyy hh:mm a'}}</td> 
      <td> 
      <button type="button" class="btn btn-secondary btn-sm" (click)="showNewsModal('active',item, true)"> 
       Modify 
      </button> 
      </td> 
     </tr> 
     </table> 
    </ng-template> 
    </ngb-tab>

来源

2017-05-09 Karu

你可以声明有ngbTabTitle模板和捕获click事件：

<ngb-tab> 
    <ng-template ngbTabTitle> 
     <div (click)="fetchNews('active')">Active</div> 
    </ng-template> 
    <ng-template ngbTabContent> 
    <table class="table table-sm table-striped" (click)="fetchNews('active')"> 
     ... 
    </table> 
    </ng-template> 
<ngb-tab>

来源

2017-05-09 19:21:13 yurzui

感谢那些工作！ – Karu

虽然我注意到了一件事。这只有当我点击标签标题时才有效。如果我点击标题以外的其他地方，那么它不会识别点击。我如何让听众倾听点击该标签上的任何地方而不仅仅是标签标题。 – Karu

我更新了答案。你可以试试 – yurzui

下面应该每次都正常工作。

fetchNews(evt: any) { 
 
    console.log(evt); // has nextId that you can check to invoke the desired function 
 
}

<ngb-tabset (tabChange)="fetchNews($event)"> 
 
    <ngb-tab title="Active"> 
 
    <ng-template ngbTabContent> 
 
     <table class="table table-sm table-striped"> 
 
     ... 
 
     </table> 
 
    </ng-template> 
 
    </ngb-tab> 
 
</ngb-tabset>

来源

2017-12-09 15:13:46 user1752112

单击标签时单击监听器 - angular2和ng bootstrap

回答

相关问题