Ng-bootstrap 下拉菜单未在 table 行上使用单击处理程序激活

Question

用户可以单击 table 行以查看详细信息。

在数据table的最后一列添加'ng-bootstrap'下拉菜单时，点击下拉按钮永远不会打开下拉菜单。因此，单击该按钮将导航到详细信息页面。

通常我在最后一列中有一个 'edit' 图标。单击图标（按钮）将启动该操作。按钮上的点击处理程序将优先于行内的点击处理程序。

这是为什么？我怎样才能防止这种情况发生？

数据table的简化版本是：

<tr class="row" *ngFor="let dataRow of datarows.rows; let i = index (click)="editDataRowDetails(dataRow)">
  <td class="col-3 col-sm-2 col-lg-1">{{dataRow.data1}}</td>

  <!-- a number of table columns --> 

  <td class="col-1 col-md-1">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Actions</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button (click)="doAction( 'Errors', dataRow.id)" ngbDropdownItem>Errors</button>
        <button (click)="doAction( 'Events', dataRow.id)" ngbDropdownItem>Events</button>
        <button (click)="doAction( 'Counts', dataRow.id)" ngbDropdownItem>Counts</button>
        </div>
    </div>
  </td>
</tr>

该应用程序是使用 Angular 12 和 Ng-Bootstrap 构建的。其他 ng-bootstrap 组件工作正常。

"@ng-bootstrap/ng-bootstrap": "^10.0.0",

Answer 1

我可以通过在单击下拉按钮时添加 stopPropagation() 调用来解决此问题。

注意ngbDropdownToggle按钮上的(click)="open($event)"和组件中添加的open功能。

stackblitz

<tr class="row" *ngFor="let dataRow of data" (click)="edit(dataRow)">
  <td class="col-3 col-sm-2 col-lg-1">{{ dataRow.data1 }}</td>

  <!-- a number of table columns -->

  <td class="col-1 col-md-1">
    <div ngbDropdown class="d-inline-block">
      <button
        class="btn btn-outline-primary"
        ngbDropdownToggle
        (click)="open($event)"
      >
        Actions
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button (click)="action('Errors', dataRow.id)" ngbDropdownItem>
          Errors
        </button>
        <button (click)="action('Events', dataRow.id)" ngbDropdownItem>
          Events
        </button>
        <button (click)="action('Counts', dataRow.id)" ngbDropdownItem>
          Counts
        </button>
      </div>
    </div>
  </td>
</tr>

import { Component, VERSION } from '@angular/core';

interface DataRow {
  data1: string;
  id: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  data: DataRow[] = [
    {
      data1: 'some Data',
      id: '1',
    },
  ];

  edit(row: DataRow) {
    console.log('edit called');
  }

  action(type: string, id: string) {
    console.log('action called');
  }

  open(event) {
    console.log('open called');
    event.stopPropagation();
  }
}

Ng-bootstrap 下拉菜单未在 table 行上使用单击处理程序激活

Ng-bootstrap Pulldown menu is not activated on table row with click handler

angular

bootstrap-4

ng-bootstrap