Пытаюсь получить данные из запроса с сервера ASP.Net и вывести их в выпадающий список на Angular 5/6.
Для этого создал класс:
export class Configuration
{
public IdConfiguration: Number ;
public ConfigurationLabel: String;
public HotKey: String;
}
Класс сервиса, в котором выполняется запрос public getConfigurations()
выглядит следующим образом:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Configuration } from '../classes/configuration';
import { catchError, map, tap } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: 'root'
})
export class SortingService {
public serverUrl = 'http://localhost:9000/api';
msgBackend: Promise<string>;
constructor(private http: HttpClient) {
}
public getConfigurations(): Observable<Configuration[]>{
return this.http.get<Configuration[]>(this.serverUrl+"/configurations/get")
.pipe(
/*tap(batches => console.log(`fetched batch`)),*/
catchError(this.handleError('getConfigurations', []))
);
}
private handleData(data: any) {
//console.log(data);
this.msgBackend= data;
}
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
}
Ну и собственно функция subscribe
getConfigurations():void{
/*this.configurations = [
{IdConfiguration:1, ConfigurationLabel:"Яловка", HotKey:"a"},
{IdConfiguration:2, ConfigurationLabel:"Бык", HotKey:"b"},
];*/
this._sortingService.getConfigurations()
.subscribe(
configurations => this.configurations = configurations
);
}
Как видно я пробовал просто создать массив конфигурация и на странице все прекрасно работает в список выводится 2 значения "Яловка" и "Бык".
HTML:
<span>Конфигурация: </span>
<select>
<option *ngFor="let configuration of configurations" [ngValue]="configuration.ConfigurationId">{{configuration.ConfigurationLabel}}</option>
</select>
С данными из запроса такого результата получить не удалось - поля пустые. Либо если вместо {{configuration.ConfigurationLabel}}
написать {{configuration}}
выдаст следующую картину:
Сам запрос приходит в таком виде:
Буду благодарен!
configuration
- {{configuration | json}}