如何始终显示ng-select的占位符？

Question

我在我的Angular应用程序中使用ng-select，并且有一个非常不寻常的用例。我需要始终显示占位符，即使在选择选项时也是如此。在当前代码中，占位符将替换为所选选项的值：

<ng-select
  [(ngModel)]="selectedApplication"
  class="application-switcher"
  [attr.data-sel-id]="selId"
  [clearable]="false"
  appendTo="body"
  [searchable]="false"
  placeholder="{{ 'APP_TITLE' | translate }}"
  [virtualScroll]="virtualScroll"
  [markFirst]="false">
    <ng-option *ngFor="let application of applicationList" [value]="application">
      <div>
        {{ getApplicationName(application) }}
      </div>
    </ng-option>
</ng-select>

Answer 1

注意：

我们可以将筹码视图与显示更多选项相结合，如下所示

​

​

代码片段：

<ng-select
          [items]="depositGroupList"
          bindLabel="groupName"
          bindValue="groupId"
          formControlName="groupId"
          appearance="outline"
          class="custom"
          [multiple]="true"
          [searchable]="true"
          [closeOnSelect]="false"
          [clearable]="true"
        >
          <ng-template
            ng-multi-label-tmp
            let-items="items"
            let-index="index"
          >
            <div class="ng-value" *ngFor="let item of items | slice: 0:2">
              {{ item.groupName }}
            </div>
            <div class="ng-value" *ngIf="items.length > 2">
              <span class="ng-value-label"
                >{{ items.length - 2}} more...</span
              >
            </div>
          </ng-template>
        </ng-select>

Answer 2

你可以做到的

      <ng-select [items]="objects"
            bindLabel="name"
            bindValue="name"
            groupBy="type"
            [clearable]="false"
            placeholder="Select your choice...">


           <ng-template ng-multi-label-tmp let-items="items" >
            <div class="ng-value" >
                <span class="ng-value-label">Select your choice... </span>
            </div>
           </ng-template>


           <ng-template ng-option-tmp let-item="item" let-index="index">
                <span class="ng-value-label">{{item.name}}</span>
           </ng-template>
       

    </ng-select>

Answer 3

作为一种快速解决方法，您可以尝试添加自定义模板并将其保留为空。

<ng-template ng-multi-label-tmp></ng-template>