键盘向上箭头无法正常与ngx-bootstrap中的typeahead控件进行分组(angular7,bootstrap4)

时间:2019-07-02 07:10:38

标签: angular bootstrap-4 angular7 typeahead ngx-bootstrap

根据问题标题,我在我的angular 7项目中将ngx-bootstrap与bootstrap4一起使用。

当前,我已经应用了typeahed的分组功能,当我使用键盘上的向上箭头键滚动时会出现问题。

我做了很多尝试和许多解决方案,但是没有用。

还检查了valx-soft站点的ngx-bootstrap,那里也存在问题。

您可以通过添加滚动查看以下链接中的问题: 去 https://valor-software.com/ngx-bootstrap/#/typeahead 查找分组,然后打开stackblitz进行分组提前输入。

在上面的stackblitz示例中的grouping.html>输入标签内添加以下两行:

async alertDisplay() {

        const {value: formValues} = await this.$swal.fire({
            title: 'Create private customer',
            html: '<input id="swal-input1" class="swal2-input" placeholder="Customer Number">' +
                '<select id="swal-input2" class="swal2-input"> <option value="fi_FI">fi_FI</option> <option value="sv_SE">sv_SE</option> </select>'
                 + 
                '<input id="swal-input3" class="swal2-input" placeholder="regNo">' +
                '<input v-model="createdCustomer.address.street" id="swal-input4" class="swal2-input" placeholder="Address (street)">' +
                '<input v-model="createdCustomer.address.city" id="swal-input5" class="swal2-input" placeholder="Address (city)">' +
                '<input v-model="createdCustomer.address.country" id="swal-input6" class="swal2-input" placeholder="Address (country)">' +
                '<input v-model="createdCustomer.address.region" id="swal-input7" class="swal2-input" placeholder="Address (region)">' +
                '<input v-model="createdCustomer.address.zipCode" id="swal-input8" class="swal2-input" placeholder="Address (zipCode)">' +
                '<input id="swal-input9" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input10" class="swal2-input" placeholder="Last Name">'
                ,
            focusConfirm: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value,
                    document.getElementById('swal-input5').value,
                    document.getElementById('swal-input6').value,
                    document.getElementById('swal-input7').value,
                    document.getElementById('swal-input8').value,
                    document.getElementById('swal-input9').value,
                    document.getElementById('swal-input10').value
                ]    

            }
        })
        if (formValues) {
            this.createdCustomer = formValues;
            console.log('the content of this.createdCustomer');
            console.log(this.createdCustomer);
            console.log('the content of this.createdCustomer.address');
            console.log(this.createdCustomer.address);
        }   
      }

0 个答案:

没有答案