在 angular 模态中输入不允许我输入

Question

我正在尝试在模式内的 table 上创建搜索，但是当模式打开时，我什至无法点击搜索输入字段。

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

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

设施-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" 部分，因为我从此处显示的配置部分传入了 class：

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

删除它后，我就可以输入搜索内容并正常运行了。我的猜测是我在另一个模态之上创建了某种类型的模态，因此导致焦点在顶部的 sudo 模态上。

只是想分享我的发现

谢谢！

在 angular 模态中输入不允许我输入

Input in an angular modal will not allow me to type

javascript

bootstrap-modal

bootstrap-4

angular

ngx-bootstrap-modal