在Angular 2中的ngx-bootstrap Typeahead中绑定一个Object而不是

发布时间：2020-12-17 17:11:04 所属栏目：安全来源：网络整理

导读：我正在使用 this链接来实现Typeahead.现在我使用TypeaheadOptionField在typeahead上显示名称,但它也绑定模型中的名称字符串.我想绑定Object而不是字符串. 我的HTML代码： input formControlName="item" class="form-control" [typeahead]="allItemsArray" [t

我正在使用 this链接来实现Typeahead.现在我使用TypeaheadOptionField在typeahead上显示名称,但它也绑定模型中的名称字符串.我想绑定Object而不是字符串.

我的HTML代码：

<input formControlName="item"  class="form-control" [typeahead]="allItemsArray" [typeaheadItemTemplate]="customItemTemplate"
          [typeaheadOptionsLimit]="7" [typeaheadMinLength]="0" [typeaheadOptionField]="name" (typeaheadOnSelect)="onSelectItem($event)">

allItemsArray：

[
    {
        name: 'a',code: '12'
    },{
        name: 'b',code: '13'
    }
]

Value bound to form control: 'a'
Required value: {'name': 'a','code': '12'}

我尝试过的一件事是实现一个事件,它将模型值设置为对象,但它不起作用.

解决方法

我现在遇到了完全相同的问题.

当typeahead与Angular Form API一起使用时,它使用为typeaheadOptionField传递的键找到的值.这是一个错误或至少它应该是可配置的.

我现在正在做的是使用自定义控件包装输入并使用输出typeaheadOnSelect,当选择typeahead选项时调用该输出.在事件数据中,您可以找到整个对象.但是你必须自己处理控制数据管理.

至少现在,我找不到另一种解决方案.

编辑：

这是我的代码(删除所有抽象,不保证它有效)：

@Component({
  selector: 'my-typeahead-control',templateUrl: './my-typeahead-control.html',providers: [
    {provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => MyTypeaheadControl),multi: true}
  ]
})
export class MyTypeaheadControl implements ControlValueAccessor
{
  // -- -- -- -- -- -- -- -- -- -- typeahead data -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

  @Input()
  public items:any[] | Observable<any[]> = [];

  @Input()
  public itemLabelKey:string;

  // -- -- -- -- -- -- -- -- -- -- internal data -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

  public selectedItemLabel:string;

  // -- -- -- -- -- -- -- -- -- -- interface implementation -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

  public writeValue(obj:any):void
  {
    this.updateSelectedItemLabel(obj);
  }

  private onChange:Function;

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

  private onTouch:Function;

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

  public setDisabledState(isDisabled:boolean):void
  {
    // ...
  }

  // -- -- -- -- -- -- -- -- -- -- control data handling -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

  public onSelect(event:TypeaheadMatch):void
  {
    this.onTouch();
    this.onChange(event.item);
    this.updateSelectedItemLabel(event.item);
  }

  private updateSelectedItemLabel(obj:any):void
  {
    this.selectedItemLabel = (this.itemLabelKey) ? _.get(obj,this.itemLabelKey) : obj;
  }
}

和模板：

<input [ngModel]="selectedItemLabel"

       [typeahead]="items"
       [typeaheadOptionField]="itemLabelKey"
       [typeaheadMinLength]="0"
       [container]="'body'"

       (typeaheadOnSelect)="onSelect($event)">

现在可以使用如下：

<my-typeahead-control formControlName="item" [items]="allItemsArray" itemLabelKey="name"></my-typeahead-control>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!