Угловой модал не сфокусированный - PullRequest
Новая
       27

Угловой модал не сфокусированный

0 голосов
/ 17 июня 2019

У меня есть таблица с кнопками действий в клиентском компоненте. для удобства сопровождения я отдельно создал новый компонент с именем customer-actions с кнопкой действия и использовал как <app-customer-actions></app-customer-actions> в компоненте customer, как показано ниже. Modal opens successfully but without focused как отображение на скриншоте фактического вывода.

customer.component.html 

<table id="bootstrap-data-table-export" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Contact</th>
            <th>Amount</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{customer.name}}</td>
            <td>{{customer.contact}}</td>
            <td>{{customer.amount}}</td>
            <td>
               <app-customer-actions></app-customer-actions>
            </td>
        </tr>
    </tbody>
</table>

клиент-actions.component.html 

<button title="Deposite Money" data-toggle="modal" data-target="#customerDepositeMoneyModal" class="w3-button w3-medium w3-green w3-card-4" >
  <i class="fa fa-inr" style="color: white;"></i>
</button>&nbsp;  

<div class="modal fade" id="customerDepositeMoneyModal" tabindex="-1" role="dialog" aria-labelledby="customerDepositeMoneyModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerDepositeMoneyModal">Receipt</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

               Test Modal

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Print</button>
                <button type="button" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</div>

Фактический результат: (без фокуса) enter image description here

Ожидаемый результат: (с фокусом) enter image description here

1 Ответ

0 голосов
/ 17 июня 2019

Это может произойти, потому что это внутри тега

. Переместите его за стол.

В идеале у вас должен быть один тег app-customer-action 

<app-customer-actions></app-customer-actions>

в вашем компоненте и скрыть / показать его на основе некоторых действий. Например

customer.component.ts 

...
isModalOpen : boolean = false;
openModal() {
    this.isModalOpen = true;
}
...

customer.component.html 

<button (click)="openModal()">Click to open modal</button>
...
...
<app-customer-actions [hidden]="!isModalOpen"></app-customer-actions>

И если вы хотите отображать различное содержимое в вашем модале в зависимости от того, какое действие было выполнено, вы можете передать их в качестве входных данных. 

<app-customer-actions
    [hidden]="!isModalOpen"
    [isPaymentModal]="isPayment"
></app-customer-actions>

Дайте мне знать, если ваш вариант использования - другой.

...