Добавьте раскрывающееся меню в интерактивную строку таблицы в Angular 6 с помощью Bootstrap 4

Question

Я работаю над учетной записью с таблицей, в которой отображаются все доступные учетные записи.В каждой строке отображается основная информация о конкретной учетной записи, и, нажав на строку «Угловые маршруты» в подробный вид этой учетной записи.

Теперь я хочу включить раскрывающееся меню в последнюю или очень правую ячейку каждой строки,где пользователи могут выбрать конкретное действие, связанное с учетными записями, например «Ввести доход», «Ввести расходы», ...

. С помощью приведенного ниже кода я не могу выбрать вариант раскрывающегося списка,потому что 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 перенаправлять к подробному виду при щелчке по раскрывающемуся списку?меню для выбора действия?

Answer 1

Старайтесь не допускать всплеска события щелчка при нажатии кнопки выбора.

Что-то вроде

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