Angular 5 - 具有不同值的输入视图

Question

我有一个使用 ngx-bootstrap 的预输入输入。

<input type="text" class="form-control with-icon" placeholder="Address ..."
      formControlName="address" [typeahead]="addressDataSource"  typeaheadOptionField="fullAddress" />

我的 addressDataSource 看起来像这样：

[
  {
    id: '1',
    fullAddress: '44000 - Nantes'
  },
  {
    id: '2',
    fullAddress: '77400 - Paris'
  }
 ....
]

问题是当我 select 一个值时，我想在输入中显示 fullAddress 中的 selected 值，这很好用，但输入的值应该只是邮政示例中的代码为 44000 或 77400。

我试图制定这样的指令：

constructor(private model: NgControl) { }

  @HostListener('input') inputChange() {
    const newValue = this.model.value.split(' ')[0];
    this.model.control.setValue(newValue);
    this.model.valueAccessor.writeValue(this.model.value);
  }

值发生变化，输入中显示的值也发生变化。

Answer 1

好的，我设法让它工作了，以防它对某人有所帮助，这是指令代码：

constructor(private model: NgControl) { }

  @HostListener('input') inputChange() {
    const newValue = this.model.value.split(' ')[0];

    this.model.control.setValue(newValue, {
        emitEvent: false,
        emitModelToViewChange: false
      });
  } 

我之前没想到为什么它不能与代码一起使用，如果有人有答案我会更新我的答案。