angular 2 ng-select, как установить выбранное значение с помощью выражения шаблона

angular 2 ng-select, как установить выбранное значение с помощью шаблона. Например что-то вроде этого,

<ng-select
          [options]="[{label : "first", value : "1"}, {label : "second", value : "2"}]"
          **[value]="'1'"**
          [multiple]="false">
</ng-select>

Я использую пакет npm angular2-select. Я хотел бы, чтобы задачу выполнял атрибут Input вместо ngModel.


person Raj    schedule 26.03.2017    source источник


Ответы (2)


Я нашел решение этой проблемы, обернув компонент ng-select пользовательским компонентом.

  @Component({
  selector: 'ice-select',
  templateUrl: './ice-select.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => IceSelectComponent),
      multi: true
    }
  ]
})

И реализованы методы интерфейса для ControlValueAccessor в компоненте.

export class IceSelectComponent implements ControlValueAccessor, OnInit {

      public writeValue(value: any) {
        this.selectedValue = value;
      }

      public registerOnChange(fn) {
        this.propagateChange = fn;
      }

      public registerOnTouched(fn){
        this.propagateTouched = fn;
      }
}

HTML-шаблон,

<ng-select
           [options]="options"
           [multiple]="false"
           [noFilter]="100"
           [allowClear]="true"
           [notFoundMsg]= "'No records found'"
           placeholder="Select"
           (selected)="onSelect($event)"
           (deselected)="onRemove($event)"
           [(ngModel)]="selectedValue"
></ng-select>
person Raj    schedule 14.04.2017
comment
Не могли бы вы добавить больше деталей? Мне интересно, как вы передали свои данные в [(ngModel)] = selectedValue - person Chetan Laddha; 18.01.2019
comment
«selectedValue» в данном случае - это общедоступная переменная, определенная внутри «IceSelectComponent». «SelectedValue» обновляется функцией «writeValue», которая вызывается интерфейсом «ControlValueAccessor» при изменении модели формы. - person Raj; 19.01.2019
comment
Есть ли способ сделать это без использования ngModel? - person eddy; 23.09.2020

Я думаю, вам следует добавить ввод bindValue, чтобы он был bindValue="value"

person Ahmed Khairy    schedule 16.05.2020