以角模态输入将不允许我键入

Question

我正在尝试在模态内部的表上创建搜索，但是当模态打开时，我什至无法在搜索输入字段中单击。

我试图做的是列出医院清单。在该医院列表上，用户可以单击“详细”视图。然后，该详细视图将弹出一个包含其他信息的对话框，并显示一个部门列表。一些医院有40多个部门，因此我想在其中添加一个搜索框，以帮助用户缩小视图范围。下面显示了我目前拥有的。如果您需要更多，请告诉我，我可以为您提供所需的一切。

facility-modal.component.html

<div class="modal-body">
        <div class="row">
            <div class="col-md-12">

                <h3 class="p-0 text-muted">Facility Information</h3>
                <!-- Facility Information -->
                <table class="table table-striped">
                    <tr>
                        <td>Speed Code</td>
                        <td>Address</td>
                        <td>City</td>
                        <td>Phone Number</td>
                    </tr>
                    <tr>
                        <td>{{facility.speedCode}}</td>
                        <td>{{facility.address}}</td>
                        <td>{{facility.city}}</td>
                        <td>{{facility.primaryNumber}}</td>
                    </tr>
                </table>

                <hr class="my-3" />
                <h3 class="p-0 text-muted">Departments</h3>
                <form>
                    <div class="form-group">
                        <input class="form-control" type="text" name="searchText" placeholder="Search departments..."
                               [(ngModel)]="searchText"/>
                    </div>
                </form>
                <table class="table table-striped table-hover">
                    <tr>
                        <td>Name</td>
                        <td>Phone</td>
                        <td>Fax</td>
                        <td>Diversion</td>
                        <td>Diversion Notes</td>
                    </tr>

                    <tr *ngFor="let dept of departments | filter:searchText">
                        <td>{{dept.descr}}</td>
                        <td>{{dept.phone}}</td>
                        <td>{{dept.fax}}</td>
                        <td>{{dept.diversion}}</td>
                        <td>{{dept.diversionNotes}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

facility-modal.component.ts

import {Component, OnInit, Inject, Optional, Input} from '@angular/core';
import {RescuenetDepartment, RescuenetFacility} from '../../../shared/models/rescuenet-facility.model';
import {RescuenetService} from '../../../shared/services/rescuenet.service';

@Component({
  selector: 'app-facility-modal',
  templateUrl: './facility-modal.component.html',
  styleUrls: ['./facility-modal.component.scss']
})
export class FacilityModalComponent implements OnInit {

  @Input() public facility: RescuenetFacility;
  departments: RescuenetDepartment[];
  searchText;

  constructor(private rescuenetService: RescuenetService) {

  }

  ngOnInit() {
    this.departments = this.rescuenetService.getDepartments(this.facility.id);
    console.log(this.facility);
    console.log(this.departments);
  }
}

这就是我所说的模态

facilities.component.ts

    open() {
        const config = {
            keyboard: true,
            class: 'modal-xl',
            initialState: { facility: this.activeRow }
        };
        const modal = this.modalService.show(FacilityModalComponent, config);

任何帮助都会很棒。

谢谢！

Answer 1

很抱歉回答我自己的问题，但我想出了要分享的内容。

在我的facility-modal.component.html文件中，顶部为

<div class="modal-dialog modal-xl" role="dialog">
    <div class="modal-header">
        <h6 class="modal-title" id="modal-title">
            {{facility.name}}
        </h6>
    </div>

    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">

                <h3 class="p-0 text-muted">Facility Information</h3>
                <!-- Facility Information -->
                <table class="table table-striped">
                    <tr>
                        <td>Speed Code</td>
                        <td>Address</td>
                        <td>City</td>
                        <td>Phone Number</td>
                    </tr>
                    <tr>
                        <td>{{facility.speedCode}}</td>
                        <td>{{facility.address}}</td>
                        <td>{{facility.city}}</td>
                        <td>{{facility.primaryNumber}}</td>
                    </tr>
                </table>

                <hr class="my-3" />
                <h3 class="p-0 text-muted">Departments</h3>
                <form>
                    <div class="form-group">
                        <input class="form-control" type="text" name="searchText" placeholder="Search departments..."
                               [(ngModel)]="searchText" />
                    </div>
                </form>
                <table class="table table-striped table-hover">
                    <tr>
                        <td>Name</td>
                        <td>Phone</td>
                        <td>Fax</td>
                        <td>Diversion</td>
                        <td>Diversion Notes</td>
                    </tr>

                    <tr *ngFor="let dept of departments | filter:searchText">
                        <td>{{dept.descr}}</td>
                        <td>{{dept.phone}}</td>
                        <td>{{dept.fax}}</td>
                        <td>{{dept.diversion}}</td>
                        <td>{{dept.diversionNotes}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

由于我从此处显示的配置部分传递了类，因此我从顶部删除了class="modal-dialog modal-xl"部分：

open() {
        const config = {
            keyboard: true,
            class: 'modal-xl',
            initialState: { facility: this.activeRow }
        };
        const modal = this.modalService.show(FacilityModalComponent, config);

一旦删除该代码，我便可以输入搜索内容，并使一切正常运行。我的猜测是，我在另一个模态之上创建了某种类型的模态，因此导致焦点集中在顶部的sudo模态上。

只是以为我会分享我的发现

谢谢！