1

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

我正在尝试做的是列出医院清单。在该医院列表中，用户可以单击“详细信息”视图。然后，该详细视图将显示一个包含附加信息的对话框，并显示部门列表。有些医院有 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);
  }
}

这就是我所说的模态

设施.component.ts

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

任何帮助都会很棒。

谢谢！

4

1 回答 1

0

很抱歉回答我自己的问题，但我想通了并想分享。

在我的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 模式上。

只是想我会分享我的发现

谢谢！

于 2019-12-28T00:50:41.023 回答