PrimeNG DropDown删除自动连续的空格

Question

我在PrimeNG DropDown元素上遇到了一个小问题。在标签中，连续的空格仅更改为1个空格。

示例：

 this.test = [
        { label: 'test     test', value: true },
        { label: 'test         test', value: false }
 ];

和HTML：

<p-dropdown name="testdropdown" placeholder="&nbsp;" filter="true" [options]="test"></p-dropdown>

结果：

您对此有解决方案吗？感谢您的宝贵时间。

Answer 1

按照@Yashwardhan的给定链接。我创建了这个。根据您的要求，您将必须使用自定义下拉菜单。如果直接放置空间，它将无法正常工作。

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'300px'}" filter="true">
        <ng-template let-car pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                <div style="width:100px;position:absolute;top:1px;left:5px">{{car.label}}</div>
                <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
            </div>
        </ng-template>
    </p-dropdown>

在component.ts中：

this.cars = [
      {label: 'Audi', value: 'Audi'},
      {label: 'BMW', value: 'BMW'},
      {label: 'Fiat', value: 'Fiat'},
      {label: 'Ford', value: 'Ford'}
  ];

Answer 2

@YashwardhanPauranik，您是对的，我必须使用模板。

@DirtyMind我想我了解您想要做什么，但是我不想在CSS定位方面做太多工作。

解决方案是：

<p-dropdown name="testdropdown" placeholder="&nbsp;" filter="true" [options]="tests" style>
    <ng-template let-test pTemplate="item">
        <div>
           <div style="white-space: pre;">{{test.label}}</div>
        </div>
     </ng-template>
</p-dropdown>

是的，解决方案只是使用ng-template的一种CSS样式...

谢谢！