加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2将一个json结果转换为一个接口

发布时间:2020-12-17 08:08:54 所属栏目:安全 来源:网络整理
导读:使用Angular2和typescript,我有一个从webApi返回的JSON,我需要把它变成一个特定类型的数组。我不知道如何将json转换到我需要的界面。 我的类型是这个界面: export interface Country { Id: number; Name: string;} 我的mock返回这个数组: export var COU
使用Angular2和typescript,我有一个从webApi返回的JSON,我需要把它变成一个特定类型的数组。我不知道如何将json转换到我需要的界面。

我的类型是这个界面:

export interface Country {
    Id: number;
    Name: string;
}

我的mock返回这个数组:

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方法 – 这是为了调试)

接下来,我将服务更改为一个返回此json的wepApi调用。

"[{"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中使用。有用。它使用数据创建数组。但是它不是一个实现Country接口的数组。

请注意,JSON中的字段名称都是小写字母,但是接口属性以大写开头,并将其编码到接口。结果,当我得到真正的json它不工作。有没有办法将这个“投射”到界面,这会引起错误,让我知道有些错误?

很多例子使用map中的map,如下图所示:

getCountries() {
        var retVal;

        return new Promise(resolve=>
            this._http.get('http://localhost:63651/Api/membercountry')
                .map(ref => ref.json())
                .subscribe(data => resolve(data.json()))
        );
    }

我找不到文件。当我尝试它,我从来没有获得数据,但没有错误。没有编译错误,没有运行时错误。

您可以对由JSON.parse创建的对象所期望的接口进行类型断言。
this.http.get('http://localhost:4200/').subscribe((value: Response) => {
    let hero = <ServerInfo>value.json();
  });

但是,如果由于两个原因,服务器发送坏对象,则不会导致任何错误。

在编译时,transpiler不知道服务器将发送什么。

在运行时,所有类型的信息都被擦除,因为一切都被编译成了JavaScript的。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读