在 Angular 中显示来自服务的价值时出错

Question

我在 Key:value 或 countryCode 中有一项服务：countryName pair

服务 ->

{"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Barthelemy", "BM": "Bermuda", "BN": "Brunei", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica"}

我已经创建了一个接口来接收来自服务的值

接口

export interface IcounrtyCode {
    code: string;
    country: string;
}

这可能在以我想要的方式接收价值时造成问题

如果你在我写的时候看到我的回复console.log(this.counrtyCode) 它显示为 ->

广告："Andorra" 不良事件："United Arab Emirates" 自动对焦："Afghanistan" AG："Antigua and Barbuda" 人工智能："Anguilla" 阿尔："Albania"

其中 AD 是关键，安道尔是价值。 也许我可以通过以下方式更改响应。 {[code:"AD",country:"country"]} 然后我可以用我的方式捕获响应 ，我尝试这样做但是我收到错误我该怎么做..？

Answer 1

您可能想为自己创建一种字典界面

interface Dict {
    [key: string]: string;
}

你应该能够将你的反应映射到那个。

您遇到的问题是您试图将对象映射到 IcounrtyCode 接口，但从服务返回的 json 的形状不正确。它需要像下面这样：

{["code": "BD", "country":"Bangladesh"]}

如果您可以控制服务器代码，我建议将服务器响应更改为正确的 json 格式。

Answer 2

虽然一些错误跟踪会很有用。但我想您可以尝试按以下方式格式化您的数据。

@Injectable()
export class DataService {

 getData():IcounrtyCode[]{
  return [{code:"BD",country: "Bangladesh"}, {code:"BE", country:"Belgium"}]
 }
}

export interface IcounrtyCode {
  code: string;
  country: string;
}

在 Angular 中显示来自服务的价值时出错

Getting error in Displaying value coming from service in Angular

angular-services

angular-module

angular

angular5

angular6