Автозаполнение от объекта - Typescript / Angular 5

Question

У меня есть объект, имя которого есть особенности. Пример объекта:

   [{"_id":"5af03d95c4c18d16255b5ac7","name":"Feature 1","description":"<p>Description</p>\n","neworchange":"new","releaseId":"5aead2d6b28715733166e59a","productId":"5aead2acb28715733166e599","__v":0},{"_id":"5af03db1c4c18d16255b5ac8","name":"Feature 2","description":"<p>Description 2</p>\n","neworchange":"change","releaseId":"5aead2d6b28715733166e59a","productId":"5aead2acb28715733166e599","__v":0}]

У меня есть поле ввода, которое автоматически заполняется значениями этого объекта.

   <input
        id="typeahead-focus"
        type="text"
        class="form-control"
        formControlName="relatedFeature"
        [ngbTypeahead]="search"
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        #instance="ngbTypeahead"
        />

В поле автозаполнения мне нужно отобразить название функций. Но когда форма отправлена, мне нужно передать идентификатор.

Я заполняю код автозаполнения, полученный из этого примера: https://ng -bootstrap.github.io / # / components / typeahead / examples # focus

import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
model:any;
angForm: FormGroup;
features:any;


@ViewChild('instance') instance: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();



constructor(//Code ommited) {
this.createForm();
}

search = (text$: Observable<string>) =>
text$
  .debounceTime(200).distinctUntilChanged()
  .merge(this.focus$)
  .merge(this.click$.filter(() => !this.instance.isPopupOpen()))
  .map(term => (term === '' ? this.features : this.features.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)));


  createForm() {
  this.angForm = this.fb.group({
  name: ['', Validators.required ],
  description: ['', Validators.required ],
  relatedFeature: ['']
  });
  }

  ngOnInit() {

  }
  getFeaturesByProduct() {
  this.route.params.subscribe(params => {
  this.featureservice.getFeaturesByProduct(params['productid']).subscribe(res => {
    this.features = res;
  });
});

}

В настоящее время поле автозаполнения выглядит так:

Но нужно отобразить названия объектов внутри.

Помощь или другие способы сделать это приветствуется, спасибо

Answer 1

У меня есть одно решение для этого же.

Вы также можете использовать ng-template для пользовательского шаблона для отображения результатов и использовать объект в качестве модели.

Я создал демо-версию stackblitz . Я надеюсь, что это поможет / руководство для вас / других.

HTML-код

<code><ng-template #rt let-r="result" let-t="term">
  {{ r.name}}
</ng-template>

<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  (focus)="focus$.next($event.target.value)"
  (click)="click$.next($event.target.value)"
  #instance="ngbTypeahead"
  [inputFormatter]="formatter"
  [resultTemplate]="rt"
/>
<pre>Selected : {{ model | json }}

код TS

search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      merge(this.focus$),
      merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
      map(term => (term === '' ? this.features
        : this.features.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );

   formatter = (x: {name: string}) => x.name;