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

Question

我正在尝试从返回 JSON 的服务中构建一个 typeahead，但是我的代码返回的是 [object Object] 而不是值。我究竟做错了什么？这似乎与我的 typeaheadoption 未正确映射到结果有关，但我不确定为什么会发生这种情况。这来自 ngx-bootstrap 的 HTTP Async 示例：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",
            "3. type": "Equity",
            "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",
            "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.7143"
        },
        {
            "1. symbol": "TSCDY",
            "2. name": "Tesco plc",
            "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.7143"
        },
        {
            "1. symbol": "TCO.DEX",
            "2. name": "Tesco PLC",
            "3. type": "Equity",
            "4. region": "XETRA",
            "5. marketOpen": "08:00",
            "6. marketClose": "20:00",
            "7. timezone": "UTC+01",
            "8. currency": "EUR",
            "9. matchScore": "0.7143"
        },
        {
            "1. symbol": "TCO.FRK",
            "2. name": "Tesco PLC",
            "3. type": "Equity",
            "4. region": "Frankfurt",
            "5. marketOpen": "08:00",
            "6. marketClose": "20:00",
            "7. timezone": "UTC+01",
            "8. currency": "EUR",
            "9. matchScore": "0.7143"
        }
    ]
}

Answer 1

问题是打字头不知道如何从字段名称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