Как получить ключ объекта в ngx- bootstrap typeahead? - PullRequest
Новая
       10

Как получить ключ объекта в ngx- bootstrap typeahead?

0 голосов
/ 22 марта 2020

Я пишу пользовательский компонент, который использует Typeahead ngx- bootstrap. Документация показывает, что я могу выбрать, какой элемент объекта я могу искать. Предположим, у меня есть список объектов значения ключа, как мне найти значение и сохранить ключ? Предполагая, что этот компонент используется в форме создания и изменения сущности, на этапе редактирования как сопоставить ключ с объектом? Как тогда мне все это сделать с помощью возможного ajax звонка? 

<div class="form-group">
  <label [htmlFor]="id"
         [attr.aria-label]="ariaLabel | translate">
    {{label | translate}}
  </label>
  <input [(ngModel)]="value"
         [typeahead]="dataList"
         class="form-control"
         [id]="id"
         [ngClass]="getClass()"
         [disabled]="disabled"
         [readOnly]="readonly"
         [autofocus]="autofocus"
         [attr.aria-label]="ariaLabel | translate"
         [tabIndex]="tabIndex"
         autocomplete="off"
         [isAnimated]="true"
         [adaptivePosition]="true"
         [typeaheadOptionField]="searchBy"
         [typeaheadScrollable]="true"
         [typeaheadOptionsInScrollableView]="6"
         [typeaheadMinLength]="startAfter"
  >
  <div class="valid-feedback">
    {{successMessage | translate}}
  </div>
  <div [attr.aria-errormessage]="errorMessage | translate" class="invalid-feedback">
    {{errorMessage | translate}}
  </div>
</div>

import {Component, forwardRef, Input, OnInit} from '@angular/core';
import {NG_VALUE_ACCESSOR} from "@angular/forms";
import {StyleService} from "../style.service";

@Component({
  selector: 'quix-autocomplete-obj',
  templateUrl: './autocomplete-obj.component.html',
  styleUrls: ['./autocomplete-obj.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => AutocompleteObjComponent),
    multi: true
  }]
})
export class AutocompleteObjComponent implements OnInit {
  @Input() label: string;
  @Input() placeholder: string;
  @Input() id: string;
  @Input() successMessage: string;
  @Input() errorMessage: string;
  @Input() customClass: string;
  @Input() validator: string | null;
  @Input() autofocus: boolean;
  @Input() readonly: boolean;
  @Input() disabled: boolean;
  @Input() ariaLabel: string;
  @Input() searchBy: string;
  @Input() tabIndex: number;
  @Input() startAfter: number;
  @Input() dataList: Array<string> = [];
  // tslint:disable-next-line:no-input-rename
  @Input('value')
    // tslint:disable-next-line:variable-name
  _value: string;

  get value() {
    return this._value;
  }

  set value(val) {
    this._value = val;
    this.onChange(val);
    this.onTouched();
  }

  constructor(private style: StyleService) {
  }

  ngOnInit(): void {
  }

  onChange(val) {
  }

  onTouched() {
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  writeValue(value) {
    if (value) {
      if (value.target) {
        this.value = value.target.value;
      } else {
        this.value = value;
      }
    } else {
      this.value = value;
    }
  }

  getClass() {
    return this.style.getClassArray(this.validator, this.customClass);
  }
}
...