Как изначально задать значение в ng-select?

#javascript #angular

Вопрос:

У меня есть ng-select со списком значений. Если я нажму на выбранное значение и нажму кнопку Очистить , нужно установить первый параметр .Пожалуйста, помогите мне, как с этим разобраться . https://stackblitz.com/edit/ng-select-wdcg5a?file=app/app.component.ts

 <ng-select class="" [items]="assigneeStatus" name="status_filter_id"
           bindLabel="lookup_label" bindValue="com_lookup_id" placeholder="Assignee Status"
           [(ngModel)]="searchAssigneeObj.status_filter_id" [hideSelected]="true"
           #status_filter_id="ngModel">
    <ng-template ng-label-tmp let-item="item">
        <span>{{item.lookup_label ||  'All'}}</span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-search="searchTerm"
                 let-index="index">
        <span>{{item.lookup_label || ''}}</span>
    </ng-template>
</ng-select>

1. можете ли вы объяснить подробнее ? вопрос не ясен

2. У меня есть больше значений в выпадающем списке ng-select. Мне нужно установить опцию по умолчанию (первый вариант) для выбора ng . Если я нажму на значок очистить , нужно будет установить первый параметр . Как я могу достичь этого ?

3. проверьте мой ответ

4. Пожалуйста, отредактируйте вопрос, чтобы ограничить его конкретной проблемой с достаточной детализацией для определения адекватного ответа.

Ответ №1:

Не существует простого способа добиться этого изначально внутри ng-select .

Вы можете определить обратный (clear) вызов события и добавить свой первый элемент в массив для достижения этой цели.

HTML:

 <ng-select [items]="cities3"
           bindLabel="name"
           multiple = true
           placeholder="Select at least one city"
           [(ngModel)]="selectedCities"
           (clear)="clearSelect()">
  <ng-template ng-label-tmp let-item="item">
    <b>{{item.name}}</b> is cool
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-index="index">
    <b>{{item.name}}</b>
  </ng-template>
</ng-select>

тс:

 export class AppComponent {
  selectedCities = [];
  cities3 = [
    {
      id: 0,
      name: 'Vilnius',
    },
    {
      id: 2,
      name: 'Kaunas',
    },
    {
      id: 3,
      name: 'Pavilnys',
    },
  ];

  constructor() {}

  addCustomUser = (term) => ({ id: term, name: term });

  public clearSelect() {
    this.selectedCities = [];
    this.selectedCities.push({
      id: 0,
      name: 'Vilnius',
    });
  }
}

Смотрите коды:

multiple: true -> >стекблитц

multiple: false -> >стекблитц

1. Можете ли вы продемонстрировать это здесь ? stackblitz.com/edit/ng-select-wdcg5a?file=app/app.component.ts

2. Я раздвоил ваш код и поделился измененным по ссылке в нижней части ответа. @Sanjana

3. сообщите мне, пожалуйста, если это было полезно. @Sanjana

4. Спасибо, это было очень полезно ! Но это работало только для multi select. Он работает, если его один выбор.

5. Для одиночного выбора вы должны использовать выбранные города как объект, а не массив. Пример: ‘this.selectedCities = { идентификатор: 0, имя: ‘город’};’.

Ответ №2:

Вы можете достичь этого с помощью clear метода.

в свой компонент добавьте приведенный ниже код :

 public selectedCity;  

constructor() {
        this.selectedCity = [this.cities3[0]];
      }

затем в ng-select clear событии добавления, как показано ниже :

 <ng-select 
     [items]="cities3"
     bindLabel="name"
     multiple = true
     placeholder="Select city"
     (clear)="resetCalculations();"
     [(ngModel)]="selectedCity">
            <ng-template ng-label-tmp let-item="item">
                <b>{{item.name}}</b> is cool
            </ng-template>
            <ng-template ng-option-tmp let-item="item" let-index="index">
                <b>{{item.name}}</b>
            </ng-template>
  </ng-select>

а затем зарегистрируйте обработчик, как показано ниже :

  resetCalculations() {
    this.selectedCity = [this.cities3[0]];
  }

вот рабочий пример : Рабочая демонстрация