How to always display a placeholder of 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>

回答1:

You can do this

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

回答2:

If You Wana Have a fix placeholder inside the selected items area, you can do it this way:

Custom template for all selected items using ng-multi-label-tmp

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

    </ng-template>
</ng-select>

Change the html file in Stackblitz of this sample Custom template for all selected items using ng-multi-label-tmp to see the result:

来源：https://stackoverflow.com/questions/60377303/how-to-always-display-a-placeholder-of-ng-select

标签

angular

angular-ngselect