Используя Angular2 и typescript, я вернул JSON из webApi, и мне нужно получить его в массив определенного типа. Я не могу понять, как использовать json для интерфейса, который мне нужен.
Мой тип - это интерфейс:
export interface Country {
Id: number;
Name: string;
}
Мой макет возвращает этот массив:
export var COUNTRIES: Country[] = [
{ "Id": 11, "Name": "US" },
{ "Id": 12, "Name": "England" },
{ "Id": 13, "Name": "Japan" }
];
Вот мой код: country.service.ts
@Injectable()
export class CountryService {
private _http = null;
constructor(http: Http) {
this._http = http;
}
getCountries() {
return Promise.resolve(COUNTRIES);
}
}
Затем я называю это следующим:
export class CountryPickerComponent {
public countries: Country[];
constructor(private _countryService: CountryService) { }
getCountries() {
this._countryService.getCountries().then(data => this.setData(data));
}
setData(data) {
//this.countries = data;
this.countries = JSON.parse(data);
var q = 1;
}
ngOnInit() {
this.getCountries();
}
}
Как вы можете видеть, у меня есть переменная класса, называемая странами, которая является массивом интерфейса страны. Это работает так, как ожидалось. (Я знаю, что мне не нужен этот метод setData - он для отладки)
Затем я изменил службу на вызов wepApi, который возвращает этот json.
"[{"name":"England","id":1},{"name":"France","id":2}]"
Я изменил метод getCountries в сервисе на:
getCountries() {
return new Promise(resolve=>
this._http.get('http://localhost:63651/Api/membercountry')
.subscribe(data => resolve(data.json()))
);
}
Используя JSON.parse, я преобразовываю это в массив, который затем могу использовать в angular2. Оно работает. Он создает массив с данными. Но это не массив, реализующий интерфейс страны.
Обратите внимание, что имена полей из JSON - это все строчные буквы, но свойства интерфейса начинаются с прописного и я кодированного интерфейса. В результате, когда я получил настоящий json, это не сработает. Есть ли способ "бросить" это на интерфейс, который должен вызвать ошибку и сообщить мне, что что-то не так?
Во многих примерах используйте карту в get, как показано ниже:
getCountries() {
var retVal;
return new Promise(resolve=>
this._http.get('http://localhost:63651/Api/membercountry')
.map(ref => ref.json())
.subscribe(data => resolve(data.json()))
);
}
Я не могу найти документацию по этому вопросу. Когда я пытаюсь, я никогда не получаю данные, но ошибок нет. Ошибка компиляции и отсутствие ошибки времени выполнения.