angular - 值未从带有 ControlValueAccessor 的自定义控件传播

Question

我有这个自定义控件，其中包括一个选择组件。但在我的 react 形式中，值(value)永远不会传播。

有人可以帮我吗？

我的自定义控件:

const SOME_SELECT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SomeSelectComponent),
  multi: true
};

@Component({
  selector: 'some-select',
  template: `
  <select class="form-control">
  <option value="" disabled>Bitte wählen sie einen Eintrag aus aus</option>
  <option *ngFor="let item of optionItems" value="{{ item.id }}">
    {{ item.name }}
  </option>
</select>
  `,
  providers: [SOME_SELECT_VALUE_ACCESSOR]
})
export class SomeSelectComponent implements OnInit, ControlValueAccessor {

  private _value: any;

  @Input() optionItems: Array<OptionItem> = [];

  private onTouchedCallback: () => void;
  private onChangeCallback: (_: any) => void;

  ngOnInit(): void {
  }

  writeValue(obj: any): void {
    console.log(obj);
    if (this._value !== obj) {
      this._value = obj;
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}

export interface OptionItem {
  key: String;
  value: String;
}

一个plnkr: https://plnkr.co/edit/VNflDbpMm1VmfIHcMcXr?p=preview

Answer 1

因为当值改变时你没有调用onChangeCallback:

<select class="form-control" (change)="change(select.value)" #select>

change(val) {
  this.onChangeCallback(val);
}

现在您可以看到控件值已更改。

您缺少的第二是将选择框从模型更新为模板，在我的 plunker 中我还添加了解决方案。

工作的plunker: https://plnkr.co/edit/C5mwsDre8OCkWYCDOF4i?p=preview