从 typeahead 中选择一个值显示 Objec 对象答案

【问题标题】：Select a value from typeahead shows Objec object从 typeahead 中选择一个值显示 Objec 对象
【发布时间】：2014-03-21 11:48:54
【问题描述】：

我正在开发单页应用程序并使用Angular-TypeAhead，当我在文本框中写一些东西时，它会向我显示建议，但是当我选择建议时，文本框的值变为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
                });

        });

在这里查看图片

【问题讨论】：

如果你做console.log($scope.states)会怎么样？
显示返回的对象，其中包含 Id、FirstName、Email 等
您需要将您的 ng-model 更改为您想要的对象的属性。所以，类似：ng-model="selectedState.name" 或类似的东西。
我有同样的问题，但在角度 4

标签： angularjs bootstrap-typeahead angular-ui-typeahead

【解决方案1】：

将ng-options="state.FirstName for state in states" 更改为ng-options="state as state.FirstName for state in states"

【讨论】：

【解决方案2】：

这是 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;

x: 是对象

【讨论】：

【解决方案3】：

对于任何使用 angular bootstrap 并发现相同问题的人，我在这方面花了太长时间。

本质上，您需要将模型视为出路的字符串，然后从 api 调用返回的复杂模型转换为字符串。

然后，您需要挂钩 OnSelect 方法以提取复杂对象并将其（或对象的唯一 ID）存储在单独的变量中。它在文档中是正确的，但考虑到您通常需要预先输入的键/值对，它并没有得到太多重视。不只是一个字符串。

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

这是一个代码 sn-p 来自 typeahead 工作正常，将搜索设置为复杂对象的 [name] 值，并将 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] 属性的接口

这应该足够开始了。这是很古老的，但我在找到我需要的东西之前就经过了这里。

【讨论】：