Question

我正在处理单页应用程序并使用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
                });

        });

查看此处的图片

enter image description here

Answer 1

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

Answer 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：是对象

Answer 3

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

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

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

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

这是来自预先输入的代码片段，它工作正常，将搜索设置为来自复杂对象的 [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] 属性的接口

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

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

3 个答案: