web-dev-qa-db-fra.com

Cliquez sur l'écouteur lorsque l'onglet est cliqué - angular2 et ng bootstrap

J'ai l'extrait de code html suivant. J'utilise angular2, ng-bootstrap ng tab. Ma question est comment puis-je invoquer une méthode cliquez quand un onglet est cliqué? J'ai ajouté (cliquez) mais je constate que la méthode fetchNews () n'est pas appelée du tout lorsque je clique sur l'onglet. Qu'est-ce que je fais mal? 

  <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>
angulartabsng-bootstrap
6
Karu

Vous pouvez déclarer le modèle ngbTabTitle et intercepter l'événement click ici:

<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>
12
yurzui

Le ci-dessous devrait fonctionner correctement à chaque fois .

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>

10
user1752112

Solution simple:: 

UtilisezngbTabTitlecomme ci-dessous .. et vous pouvezdéclencher un événementà partir d'ici comme ci-dessous code

 <ngb-tabset>
      <ngb-tab  >
          <ng-template ngbTabTitle>
              <div (click)="getTransactionList()">Transactions</div>
          </ng-template>

        <ng-template ngbTabContent >
          <table class="custom-table">
            <thead>
              <tr>
                <th>TransactionID</th>
                <th>Sender</th>
                <th>Recipient</th>
                <th>Time</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let Transaction of getTransactions | slice:0:10; let i=index">
                <td>{{Transaction.id}}</td>
                <td>{{Transaction.senderId}}</td>
                <td>{{Transaction.recipientId}}</td>
                <td>{{Transaction.timestamp}}</td>
                <td>{{Transaction.amount}}</td>
              </tr>
            </tbody>
          </table>
        </ng-template>
      </ngb-tab>


      <ngb-tab>
               // your code 
     </ngb-tab>

     <ngb-tab>
               // your code 
     </ngb-tab>

<ngb-tabset>
0
ngCourse