如何始终显示 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

如果您想在所选项目区域内有一个固定占位符，您可以这样做：

\n

使用ng-multi-label-tmp为所有选定项目自定义模板

\n

<ng-select\n    [items]="githubUsers$ | async"\n    [multiple]="true"\n    bindLabel="login"\n    bindValue="login"\n    placeholder="Select items"\n    [(ngModel)]="selectedUsers">\n    <ng-template ng-multi-label-tmp let-items="items" >\n        <div class="ng-value" >\n            <span class="ng-value-label">Items Selected: </span>\n        </div>\n        <div class="ng-value" *ngFor="let item of items ">\n            <span class="ng-value-label"> {{item.login}}</span>\n            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">\xc3\x97</span>\n        </div>\n\n    </ng-template>\n</ng-select>\n

\n

使用 ng-multi-label-tmp 更改此示例自定义模板的 Stackblitz 中的 html 文件以查看结果：

\n

\n