Question

angular 2 ng - 选择如何使用模板设置所选值。例如，像这样的东西，

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

我正在使用angular2-select npm包。我想让Input属性执行任务而不是ngModel。

Answer 1

我通过使用自定义组件包装ng-select组件来解决此问题。

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

为ControlValueAccessor＆＃39;实现了接口方法。在组件中。

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>

Answer 2

我认为您应该将bindValue输入添加为bindValue="value"

angular 2 ng-选择如何使用模板表达式设置所选值

2 个答案: