Блог

Я пытаюсь создать typeahead из службы, которая возвращает JSON, однако мой код возвращает [object Object] вместо значений. Что я делаю не так? Похоже, что это как-то связано с тем, что мой typeaheadoption неправильно сопоставляется с результатом, однако я не уверен, почему это произошло. Это взято из примера HTTP Async из ngx-bootstrap: 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 amp;amp; 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"
        }
    ]
}
 

Проблема в том, что 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">
 

Вот рабочая демонстрация