Question

我刚刚开始学习自动完成搜索。我可以从后端服务器获取对象，但是当我尝试用HTML显示它们时，出现以下错误。

NgbTypeaheadWindow.html:5 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.js:4477)
at checkAndUpdateDirectiveInline (core.js:24506)
at checkAndUpdateNodeInline (core.js:35163)
at checkAndUpdateNode (core.js:35102)
at debugCheckAndUpdateNode (core.js:36124)
at debugCheckDirectivesFn (core.js:36067)
at Object.eval [as updateDirectives] (NgbTypeaheadWindow.html:5)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:36055)
at checkAndUpdateView (core.js:35067)
at callViewAction (core.js:35433)

代码：

app.component.html

  <div class="my-0 mr-md-auto font-weight-normal">

<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="issue_name" [ngbTypeahead]="search"
  [resultFormatter]="resultFormatBandListValue" [inputFormatter]="inputFormatBandListValue"
  #instance="ngbTypeahead" />

<hr>
<pre>Model: {{ model | json }}</pre>

app.component.ts

    import { Component } from '@angular/core';
import { BugService } from './shared/bug.service';
//import { FormBuilder, FormGroup } from '@angular/forms';
import {FormsModule} from '@angular/forms'
import { TranslateService } from '@ngx-translate/core';
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
import { debounceTime,map, tap, switchMap, finalize, distinctUntilChanged } from 'rxjs/operators';
import { Bug } from './shared/bug';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  title = 'Angular Internationalization tutorial';
  public model: any;
  bugList: Bug[] = [];

  // Setting the default language of the application.
  constructor(private translate: TranslateService,   public bugService: BugService) {
    translate.setDefaultLang('en');
  }

  // Method to change the language.
  switchLanguage(language: string) {
    console.log("Language"+language);
    this.translate.use(language);
  }

  // search = (text$: Observable<string>) =>
  //   text$.pipe(
  //     debounceTime(200),

  //     map(term => term === '' ? []
  //       : statesWithFlags.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
  //   )
  // formatter = (x: {name: string}) => x.name;

  search = (text$: Observable<string>) => {
    return text$.pipe(      
        debounceTime(200), 
        distinctUntilChanged(),
      distinctUntilChanged(),
      switchMap( searchText => 
         searchText.length < 2 ? [] : this.bugService.GetIssue1(searchText)
      ));
      }

    /**
 * Used to format the result data from the lookup into the
 * display and list values. Maps `{name: "band", id:"id" }` into a string
*/
resultFormatBandListValue(value: any) {            
  return value.issue_name;
} 
/**
  * Initially binds the string value and then after selecting
  * an item by checking either for string or key/value object.
*/
inputFormatBandListValue(value: any)   {
  if(value.issue_name)
    return value.issue_name
  return value;
}
}

bugService.GetIssue1（searchText）调用的JSON输出：

    {
  "issue_name": "Bharathi Senthilnath",
  "issue_message": "Banana for seal, red bananna for sale. Address: 10",
  "issue_number": "300 bananna",
  "id": 20
}

Answer 1

ng-bootstrap API期望[ngbTypeahead]输入为(text: Observable<string>) => Observable<any[]>（https://ng-bootstrap.github.io/#/components/typeahead/api）类型的函数。您的search函数返回一个流，该流发出[]（它是一个数组）或bugService.GetIssue1的结果，不是。

您可以使用数组包装单个值，例如

makeApiCall(...someArgs).pipe(map( result => ([result])))

但是后端不应该返回一系列建议而不是一次点击吗？

角引导搜索错误找不到类型为“对象”的其他支持对象“ [对象对象]”

1 个答案: