时间戳

首页 > 解决方案 > 使用 Bootstrap 4 将下拉菜单添加到 Angular 6 中的可点击表格行

angular - 使用 Bootstrap 4 将下拉菜单添加到 Angular 6 中的可点击表格行

问题描述

我正在处理带有表格的账簿，其中显示了所有可用的帐户。每行显示有关特定帐户的基本信息，并通过单击一行 Angular 路由到该帐户的详细视图。

现在我想在每行的最后一个或最右边的单元格中包含一个下拉菜单，用户可以在其中选择与帐户相关的特定操作，即“输入收入”、“输入费用”……

使用下面提供的代码，我无法选择下拉列表的选项，因为 Angular 会立即路由到详细视图，因为当然我在单击下拉列表时也单击了该行。

<table class="table accounts-body">
          <thead>
            <tr>
              <th>Accounttype</th>
              <th>Accountnumber</th>
              <th>Balance</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr class="account" *ngFor="let account of 
                depositor.bankAccounts" (click)="onAccountClicked(account)">
              <td class="table-entry">{{account.accountType}}</td>
              <td class="table-entry">{{account.accountNumber}}</td>
              <td class="table-entry">{{account.balance | number: '1.2-2'}} EUR</td>
              <td class="table-entry">
                <select (change)="onActionSelected($event)>
                  <option>enter revenue</option>
                  <option>enter expense</option>
                </select>
              </td>
            </tr>
            <tr class="total">
              <td colspan="2">Sum:</td>
              <td colspan="2">
                {{getTotal(depositor) | number: '1.2-2'}} EUR
              </td>
            </tr>
          </tbody>
        </table>

单击下拉菜单以选择操作时，如何防止 Angular 路由到详细信息视图？

标签： angularbootstrap-4

解决方案

点击选择时尽量防止点击事件的冒泡。

类似的东西

<select (click)="$event.stopPropagation()" ...

推荐阅读