Ng-bootstrap下拉菜单未在单击处理程序的表上激活

Question

用户可以点击表格的一行查看详细信息。

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

通常我在最后一列有一个"编辑"图标。单击图标(按钮)将启动该操作。按钮上的单击处理程序将优先于行单击处理程序。

为什么?我怎样才能避免呢?

数据表的简化版本为:

<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();
}
}