ngx-bootstrap typeahead http request returns object 对象
ngx-bootstrap typeahead http request returns object Object
我正在尝试根据 returns 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",
"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"
}
]
}
问题是打字头不知道如何从字段名称 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">
我正在尝试根据 returns 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",
"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"
}
]
}
问题是打字头不知道如何从字段名称 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">