Question

我正在尝试使用此shlomiassaf/angular2-modal库轻松弹出我的项目。但它似乎并没有正确地呈现html。

这是我到目前为止模态的代码（我尽量保持简单）：

    public addItinerary = () => {
        this.modal.alert()
            .size('lg')
            .showClose(true)
            .title('Add Itinerary')
            .body(`
            <h4>Please configure your new itinerary</h4>
            <ul>
                <li><input type='checkbox' checked />Dallas</li>
                <li><input type='checkbox' />Houston (Saving 0:45)</li>
                <li><input type='checkbox' checked />Brownsville</li>
                <li><input type='checkbox' checked />Laredo</li>
                <li><input type='checkbox' />La Enchilada (Saving 0:30)</li>
</ul>
            <b>Repeat On</b><br />
            <input type="checkbox"> Monday
            <input type="checkbox"> Tuesday
            <input type="checkbox"> Wednesday
            <input type="checkbox"> Thursday
            <input type="checkbox"> Friday
            <input type="checkbox"> Saturday
            <input type="checkbox"> Sunday
            <br />
            <div class="row">
                <div class="col-md-5">
                    <select>
                        <option>Test Option</option>
                    </select>
                </div>
                <div class="col-md-5"></div>
                <div class="col-md-2">
                    <input type="checkbox" /> All Year<br />
                    <input type="checkbox" /> All Day
                </div>
</div>`)
            .open();
    };

这是我得到的模式（请注意任何复选框和选择控件）：

我构建代码的方式有问题吗？你知道一个更简单的解决方案/库来获得我的angular 4应用程序的模态吗？

提前致谢，

Answer 1

BS可能对其表单字段特别有用。我注意到他们使用复选框字段，如下所示：

<div class="checkbox">
    <label>
        <input type="checkbox"> Check me out
    </label>
</div>

现在，相应的checkbox文字未包含在label标记中。也没有表单标记中的字段也可能导致问题。希望有所帮助

HTML在Angular 4上的Bootstrap Modal上无法很好地呈现

1 个答案: