Модальное открытие первого экземпляра вместо правильного - PullRequest
Новая
       5

Модальное открытие первого экземпляра вместо правильного

0 голосов
/ 29 мая 2018

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

Я создал модальный элемент управления, который выглядит примерно так: 

<button #btn style="display: none;" hidden="hidden" class="btn btn-info btn-

lg"  data-backdrop="static" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div #myModal class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" (click)="close()" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>
            <div class="modal-footer">
                <button type="button" (click)="close()" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

и элемент управления поиском, который выглядит примерно так: 

<div class="search-and-select">
    <label>{{label}}</label>
    <div class="search-and-select-container">
        <div class="textbox">{{displayValue}}</div>
        <button (click)="openModal()"><span><i class="fa fa-search-plus"></i></span></button>
    </div>
</div>
<modal [(isOpen)]="isModalOpen"
       [title]="modalTitle">
    <div class="row">
        <div class="col-md-4">
            <dropdown label="Column" displayMemberPath="header" [itemsSource]="columns" valueMemberPath="header" [(ngModel)]="searchColumn"></dropdown>
        </div>
        <div class="col-md-4">
            <textbox label="Search" [(ngModel)]="searchText"></textbox>
        </div>
        <div class="col-md-3">
            <button (click)="onSearch()" class="btn btn-primary" style="margin-top: 15px;"> Search</button>
            <button (click)="onClearSearch()" class="btn btn-primary" style="margin-top: 15px;"> Clear</button>
        </div>
    </div>
    <div class="row search-and-select-table-container">
        <table class="table table-responsive" style="max-height: 500px; overflow-y: scroll;">
            <thead>

            <tr>
                <th class="button-column"></th>
                <th *ngFor="let column of columns">{{column.header}}</th>
            </tr>
            </thead>

            <tbody>
            <tr *ngFor="let row of rows">

                <td class="button-column"><button (click)="onSelectedRow(row)" class="btn btn-primary"><span><i class="fa" [ngClass]="{'fa-square-o': !row.$isChecked,'fa-check-square-o': row.$isChecked}"></i></span></button></td>
                <td *ngFor="let column of columns">
                    {{getValue(row,column)}}
                </td>

            </tr>
            </tbody>
        </table>
    </div>
</modal>

Это работает, если есть толькоодин из этих элементов управления на странице, но если я добавлю более одного, он откроет первый модальный элемент управления вместо правильного.Могу ли я убедиться, что открываю правильный модал?

1 Ответ

0 голосов
/ 29 мая 2018

Для этого сценария требуются две обязательные вещи

  • Вы должны предоставить атрибут id с разными именами
  • Вы должны указать другое имя модели [(isOpen)]="isModalOpen" - show/hideТочное диалоговое окно модели.
...