Выбор значения из typehead показывает объект Object

Я работаю над одностраничным приложением и использую Angular-TypeAhead, когда я пишу что-то в текстовом поле, оно показывает мне предложения, но когда я выбираю предложение, значения Textbox становятся Object object вместо имени

вот моя разметка HTML

<div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label><i class="fa fa-globe"></i> State</label>
        <input type="text" class="form-control" ng-model="selectedState" ng-options="state.FirstName for state in states" placeholder="Enter state" bs-typeahead>
      </div>
    </form>
  </div>

и вот мой код AngularJS

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])

        .controller('TypeaheadDemoCtrl', function ($scope, $templateCache, $http) {

            $scope.selectedState = '';

            $http.get('/api/servicesapi/GetAllClients')
            .then(
                function (result) {
                    //success
                    $scope.states = result.data;
                },
                function () {
                    //error
                });

        });

посмотреть изображения здесь

введите здесь описание изображениявведите здесь описание изображения


angularjs bootstrap-typeahead angular-ui-typeahead
person Mohsin    schedule 21.03.2014    source источник
comment
Что если вы получите, если выполните console.log($scope.states) ???   -  person BKM    schedule 21.03.2014
comment
он показывает возвращаемый объект, который содержит идентификатор, имя, адрес электронной почты и т. д.   -  person Mohsin    schedule 21.03.2014
comment
вам нужно изменить свою ng-модель, чтобы она была свойством того объекта, который вы хотите там. Итак, что-то вроде: ng-model=selectedState.name или что-то в этом роде.   -  person Jake Johnson    schedule 21.03.2014
comment
У меня такая же проблема, но в угловом 4   -  person Ghizlane Lotfi    schedule 27.04.2018

Ответы (3)


arrow_upward
6
arrow_downward

Изменить ng-options="state.FirstName for state in states" на ng-options="state as state.FirstName for state in states"

person L42y    schedule 12.08.2014

arrow_upward
2
arrow_downward

Это решение в Angular 4, а не в angularJS.

Я добавил [inputFormatter]="formatMatches" для форматирования ввода (ngmodel) и [resultFormatter]="formatMatches" для форматирования отображаемых данных.

<input id="typeahead-format" type="text" [(ngModel)]="clickedItem" 
    name="profile" (selectItem)="selectedItem($event)"
   [resultFormatter]="formatter" [inputFormatter]="formatter"
   [ngbTypeahead]="search" #instance="ngbTypeahead"/>

и функция форматирования выглядит так:

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

х: это объект

person Ghizlane Lotfi    schedule 27.04.2018

arrow_upward
0
arrow_downward

Для тех, кто использует угловой бутстрап и обнаруживает ту же проблему, я потратил на это слишком много времени.

По сути, вам нужно рассматривать модель как строку на выходе, а затем преобразовать в строку из сложной модели, возвращенной из вызова API.

Затем вам нужно подключиться к методу OnSelect, чтобы извлечь сложный объект и сохранить его (или уникальный идентификатор объекта) в отдельной переменной. Это правильно в документах, но ему не уделяется много внимания, учитывая, что обычно вам нужна пара ключ/значение из предварительного ввода. Не просто струна.

https://valor-software.com/ngx-bootstrap/#/typeahead#on-select

Вот фрагмент кода из typeahead, который отлично работает, чтобы установить поиск как значение [имя] из сложного объекта, а selectedObject — как весь элемент.

  <pre class="card card-block card-header">Search: {{ search | json }}</pre>
      <pre class="card card-block card-header">Selected: {{ selectedOption | json }}</pre>

      <ng-template #customItemTemplate let-model="item" let-index="index">
        <div>
          <p>This is: {{ model.name }} Number: {{ model.id }} Index: {{ index }}</p>
          <p>Some secondary information about {{ model.name }}</p>
        </div>
      </ng-template>

      <input [(ngModel)]="search"
             [typeahead]="suggestions$"
             typeaheadOptionField="name"
             (typeaheadOnSelect)="onSelect($event)"
             [typeaheadAsync]="true"
             typeaheadWaitMs="500"
             [typeaheadMinLength]="3"
             [typeaheadItemTemplate]="customItemTemplate"
             class="form-control"
             placeholder="Enter a street name">

             <div class="alert alert-danger" role="alert" *ngIf="errorMessage">
               {{ errorMessage }}
             </div>

то в моем компоненте у меня есть

  ngOnInit(): void {
    this.suggestions$ = new Observable((observer: Observer<string>) => {
      observer.next(this.search);
    }).pipe(
      switchMap((query: string) => {
        if (query) {
          return this.YOURSERVICE.YOURMETHOD(query);
        }

        return of([]);
      })
    );
  }

  onSelect(event: TypeaheadMatch): void {
    this.selectedOption = event.item;
  }

ваш метод должен возвращать интерфейс со свойством [name]

Этого должно быть достаточно, чтобы начать. Это очень старо, но я прошел здесь, прежде чем нашел то, что мне было нужно.

person David Synott    schedule 11.02.2021