ngx-bootstrap typeahead http 请求返回对象 Object

如何解决ngx-bootstrap typeahead http 请求返回对象 Object

我正在尝试通过返回 JSON 的服务构建预先输入，但是我的代码返回 [object Object] 而不是值。我究竟做错了什么？这似乎与我的 typeaheadoption 没有正确映射到结果有关，但是我不确定为什么会发生这种情况。这来自 ngx-bootstrap 的 HTTP 异步示例：https://valor-software.com/ngx-bootstrap/#/typeahead

这是我的组件和 HTML 代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { noop,Observable,Observer,of } from 'rxjs';
import { map,switchMap,tap } from 'rxjs/operators';

interface Matches {
  
 bestMatches: Symbols[];
}

interface Symbols {
  "1. symbol": string;
  "2. name":  number;
  "3. type": string;
  "4. region": string;
  "5. marketOpen": Date;
  "6. marketClose": Date;
  "7. timezone": string;
  "8. currency": string;
  "9. matchScore": number;
}

@Component({
  selector: 'typeahead-http',templateUrl: './typeahead.component.html'
})
export class TypeaheadComponent {
  search: string;
  suggestions$: Observable<Symbols[]>;
  errorMessage: string;
 
  constructor(private http: HttpClient) {

    this.search = "";
    this.suggestions$ = new Observable
    this.errorMessage = "";

  }
 
  ngOnInit(): void {
    this.suggestions$ = new Observable((observer: Observer<string>) => {
      observer.next(this.search);
    }).pipe(
      switchMap((query: string) => {
        if (query) {
          return this.http.get<Matches>(
            'https://www.alphavantage.co/query',{
            params: {function:"SYMBOL_SEARCH",keywords: query,apikey:"demo"  }
          }).pipe(
            map((data: Matches) => data.bestMatches|| []),tap(() => noop,err => {
              // in case of http error
              this.errorMessage = err && err.message || 'Something goes wrong';
            })
          );
        }
        return of([]);
      })
    );
  }
}



<pre class="card card-block card-header">Model: {{ search | json }}</pre>
 
<input [(ngModel)]="search"
        typeaheadOptionField="region"
       [typeahead]="suggestions$"
       [typeaheadAsync]="true"
       class="form-control"
       placeholder="Enter GitHub username">
 
<div class="alert alert-danger" role="alert" *ngIf="errorMessage">
  {{ errorMessage }}
</div>

{
    "bestMatches": [
        {
            "1. symbol": "TESO","2. name": "Tesco Corporation USA","3. type": "Equity","4. region": "United States","5. marketOpen": "09:30","6. marketClose": "16:00","7. timezone": "UTC-05","8. currency": "USD","9. matchScore": "0.8889"
        },{
            "1. symbol": "TSCO.LON","2. name": "Tesco PLC","4. region": "United Kingdom","5. marketOpen": "08:00","6. marketClose": "16:30","7. timezone": "UTC+00","8. currency": "GBP","9. matchScore": "0.7273"
        },{
            "1. symbol": "TSCDF","2. name": "Tesco plc","9. matchScore": "0.7143"
        },{
            "1. symbol": "TSCDY",{
            "1. symbol": "TCO.DEX","4. region": "XETRA","6. marketClose": "20:00","7. timezone": "UTC+01","8. currency": "EUR",{
            "1. symbol": "TCO.FRK","4. region": "Frankfurt","9. matchScore": "0.7143"
        }
    ]
}

解决方法

问题是 typehead 不知道如何从字段名称 4. region 中检索值，因为根据其内部实现它是无效的！ 一个合适的解决方案是像下面这样声明你的接口：

export interface Symbols {
  symbol: string;
  name:  string;
  type: string;
  region: string;
  marketOpen: string;
  marketClose: string;
  timezone: string;
  currency: string;
  matchScore: string; 
}

接下来，您需要将您从 api 收到的响应映射到您的新界面，如下所示：

    // ...
 map((data: any) => (data.bestMatches|| []).map(e=><Symbols>{
            symbol: e["1. symbol"],name:  e["2. name"],type: e["3. type"],region: e["4. region"],marketOpen: e["5. marketOpen"],marketClose: e["6. marketClose"],timezone: e["7. timezone"],currency: e["8. currency"],matchScore: e["9. matchScore"],}))
      // ....

最后，使用 region 作为 typeaheadOptionField：

<input [(ngModel)]="search"
        typeaheadOptionField="region"
       [typeahead]="suggestions$"
       [typeaheadAsync]="true"
       class="form-control"
       placeholder="Enter GitHub username">

Here is a working demo