Закрыть мод начальной загрузки, используя машинопись в angular 2

angular typescript

14337 просмотра

2 ответа

У меня есть кнопка, по нажатию которой я открываю модальное всплывающее окно. Модальное всплывающее окно содержит поле с кнопкой отправки. Я хочу закрыть всплывающее окно только после завершения сохранения данных. Я не могу использовать удаление данных, так как оно закроет всплывающее окно сразу после того, как пользователь нажмет кнопку. Есть ли способ закрыть всплывающее окно с помощью машинописи?

expense.component.html

<div id="AddExpense" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Expense</h4>
                </div>
                <div class="modal-body">
                    <form id="form" (ngSubmit)="saveExpense();">
                        <div class="form-group">
                            <table class="table table-responsive" style="border:0">
                                <tr *ngFor="#column of columnInputs" style="height:20px;">
                                    <td class="text-right" style="padding-top:10px;border:0">
                                        <h4> {{column.name | case}}: </h4>
                                    </td>
                                    <td class="text-center" style="padding-top:10px;border:0">
                                        <input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" />
                                        <select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required>
                                            <option value="status">--Select--</option>
                                            <option value="1">Paid</option>
                                            <option value="2">Unpaid</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-lg"> Add Expense </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
Автор: user728630 Источник Размещён: 08.11.2019 11:22

Ответы (2)


8 плюса

Вы можете использовать действие на кнопку закрытия

<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" #closeAddExpenseModal>&times;</button>
                <h4 class="modal-title">Add Expense</h4>
            </div>

и в вашем контроллере вы можете добавить эту строку после действия, которое вы используете

this.closeAddExpenseModal.nativeElement.click();

вам нужно будет добавить этот импорт в ваш контроллер

import { ViewChild, ElementRef} from '@angular/core';

вам также нужно будет определить closeAddExpenseModal

@ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;
Автор: 3alaa baiomy Размещён: 27.08.2017 08:21

-4 плюса

Я не уверен, что вам действительно нужно делать, но если вы хотите закрыть модал с помощью машинописного текста, вы можете просто дать идентификатор вашему модальному html и вызвать метод 'hide'.

$('#newPostModal').modal('hide');    

Извините, если это не то, что вы хотите, может быть, если вы можете объяснить мне лучше, я могу помочь вам

Автор: Marco Castano Размещён: 20.08.2016 01:57
Вопросы из категории :
32x32