Очистить значок «x» отсутствует при использовании ng-template для ng-select - PullRequest
Новая
       9

Очистить значок «x» отсутствует при использовании ng-template для ng-select

0 голосов
/ 13 декабря 2018

При использовании ng-шаблона для выбранных элементов.значок «x» для удаления элемента отсутствует, документация пакета об использовании ng-шаблона довольно скудна, поэтому я безуспешно копался в их источнике.

Я собрал это stackblitz , чтобы вы могли воспроизвести проблему

HTML 

<form>
  <ng-select 
  [items]="availableItems" 
  [multiple]="true" 
  [closeOnSelect]="false"
    [hideSelected]="true" 
  [searchable]="true" 
  placeholder="Choose an item" 
  [(ngModel)]="selectedItems"
     name="item">
        <ng-template ng-label-tmp let-item="item">
            <div>{{item.name}}</div>
        </ng-template>
        <ng-template ng-option-tmp let-item="item">
            <div>{{item.name}}</div>
        </ng-template>
    </ng-select>
</form>

component.ts 

export class AppComponent {

  availableItems = [
    { id: 1, name: 'name 1', value: 'value 1' },
    { id: 2, name: 'name2', value: 'value 2' },
    { id: 3, name: 'name 3', value: 'value 3' },
    { id: 4, name: 'name 4', value: 'value 4' }
  ];
  selectedItems = [
    { id: 2, name: 'name2', value: 'value 2' },
    { id: 3, name: 'name 3', value: 'value 3' },
  ]
}

Есть мысли?

1 Ответ

0 голосов
/ 13 декабря 2018

При передаче в пользовательский шаблон, вам нужно определить кнопку очистки внутри него.Пожалуйста, обратитесь к документации здесь: https://ng -select.github.io / ng-select # / multiselect

Вам необходим шаблон, подобный следующему: 

<ng-template ng-label-tmp let-item="item" let-clear="clear">
    <span class="ng-value-label">{{item.login}}</span>
    <span class="ng-value-icon right" (click)="clear(item)">×</span>
</ng-template>

Я изменил ваш StackBlitz, чтобы добавить эту функцию.Вы можете найти это здесь .

...