模态打开第一个实例而不是正确的一个

Question

我有一个问题，我已经研究了一段时间，但似乎无法解决这个问题。我有一个创建可重用控件的应用程序，因为我希望能够在一个地方编辑它们。

我创建了一个类似于以下内容的模态控件：

<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>

如果页面上只有一个这些控件，则此方法有效，但如果我添加多个控件，它将打开第一个控件模式而不是正确的模式。我可以确保我打开了正确的模式吗？

Answer 1

这个场景需要两个强制性的东西

• 您应该为id 属性提供不同的名称
• 您应该在确切的模型对话框中提供不同的模型名称[(isOpen)]="isModalOpen" 到show/hide。