javascript - Bootstrap Modal 中的输入不可编辑

Question

我创建了一个带有输入文本的 Bootstrap 模式，如下图所示。输入的焦点集中在点击上(有时)，但是当我尝试输入文本时，什么也没有发生。我正在使用 Angular 4，在我的项目结构中，我有一个组件，它有另一个模态对话框 - 并且输入工作正常，但是该组件的子组件具有此模态(附加到显示的文档正文)和输入不可编辑。

您知道为什么会发生这种情况吗？

谢谢

模态代码:

<div class="modal fade" id="boardDetailsModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Edit timeline</h4>
        </div>
        <div class="modal-body">
            <input type="text">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" (click)="saveTimeline()">Save</button>
            <button type="button" class="btn btn-default" (click)="close()">Close</button>
        </div>
    </div>
</div>
</div>

显示模态的代码:

ngAfterViewInit() {
    let self = this;
    self.element.appendTo("body").modal('show');
}

Answer 1

我认为你有一个小错字。

将您的输入更改为:

<input type="text" />

注意正斜杠。