web-dev-qa-db-ja.com

タブがクリックされたときにリスナーをクリックする-angular2およびng bootstrap

次のhtmlコードスニペットがあります。 angular2、ng-bootstrap ngタブを使用しています。私の質問は、タブがクリックされたときにメソッドクリックを呼び出す方法ですか？追加（クリック）しましたが、タブをクリックしてもfetchNews（）メソッドがまったく呼び出されません。何が悪いのですか？

  <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
10
Karu

ngbTabTitleテンプレートを宣言して、そこでクリックイベントをキャッチできます。

<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>
20
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>
20
user1752112
  1. HTMLでは、ngb-tabsetタグにtabChangeイベントを追加する必要があります
  2. イベントngb-tabに一意のIDを設定します
  3. .tsファイルで、タブの変更アクションを実行します

。htmlファイル

<ngb-tabset (tabChange)="changeTab($event)">   <- Add Event 
    <ngb-tab [id]="0">                         <- SET ID
        <ng-template ngbTabTitle>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
    <ngb-tab [id]="1">                          <- SET ID
        <ng-template ngbTabTitle>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
</ngb-tabset>

。tsファイル

changeTab(event) {
    if (event.nextId == '0') {
        // Action for first tab
    }

    else if (event.nextId == '1') {
        // Action for second tab
    }
}
3
ketan chaudhari

パーティーに遅れますが、クリックイベントが機能するためには、ngb-tabset（コードには表示されず、通常bootstrapタブにそのタグがあります）に設定する必要があります。 ngb-タブ上<ngb-tabset type="pills" id="myId" class="myClass" (click)="togglePanel($event)">

1
jazzo

簡単な解決策：：

以下のようにngbTabTitleを使用してくださいイベントをトリガーするここからコードのように

 <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

シンプルcssトリックこのように適用できます。 user1752112の回答を少し変更します。

<ngb-tab>
  <ng-template ngbTabTitle>
      <div style="padding: 8px 10px;" (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>

あなたのCSSファイルでこれを使用してください。

::ng-deep .nav-tabs .nav-link {
    padding: 0 !important;
}
0
RUPAM BASAK