如何设置预先输出模块中下拉列表的宽度

Question

我试图了解如何将Typeahead模块中的下拉列表设置为与输入文本具有相同的宽度，而不是根据下拉列表中内容的宽度动态更改。我正在使用ng-bootstrap的1.0.0-alpha.15。

Answer 1

只需在下拉模板中添加宽度

即可

这

<template #rt let-r="result" let-t="term">
    <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r.flag" width="16">
    {{ r.name}}
</template>

要

<template #rt let-r="result" let-t="term">
    <div style="width: 350px;">
        <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r.flag" width="16">
        {{ r.name}}
    </div>
</template>

Plunk

  

如何将Typeahead模块中的下拉列表设置为与输入文本

具有相同的宽度

imho可能是一个坏主意，但如果你不想要静态宽度，你可以calculate the input string width并使用NgStyle代替。