如何始终显示 ng-select 的占位符? [英] How to always display a placeholder of ng-select?

问题描述

我在我的 Angular 应用程序中使用 ng-select 并且有一个非常不寻常的用例.我需要始终显示占位符，即使选择了选项.使用当前代码，占位符被替换为所选选项的值:

<ng-select[(ngModel)]=选定的应用程序"；类=应用程序切换器"[attr.data-sel-id]=selId"[可清除] =假"appendTo=正文"[可搜索]=假"占位符 ={{ 'APP_TITLE' |翻译}}"[virtualScroll]=virtualScroll"[markFirst]=假"><ng-option *ngFor="let application of applicationList";[值]=应用程序"><div>{{ getApplicationName(application) }}

</ng-option></ng-select>

解决方案

注意:

我们可以将筹码视图与显示更多选项结合起来

代码片段:

{{ item.groupName }}

<div class="ng-value";*ngIf=items.length >"2"><span class="ng-value-label";>{{ items.length - 2}} 更多...</span>

</ng-模板></ng-select>

I am using ng-select in my Angular application and have quite an unusual use case. I need to always display the placeholder, even on option selected. With current code the placeholder is replaced with the value of selected option:

<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>

解决方案

Note:

We can combine the chips view with show more option as

Code Snippet:

<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>

这篇关于如何始终显示 ng-select 的占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！