Angular 6和类型化的API数据

13 浏览
0 Comments

Angular 6和类型化的API数据

我对Angular和TypeScript非常陌生，最近在阅读一些关于返回类型化数据的帖子。有些文章指出，在从服务返回对象后，必须对其进行映射，而其他文章则只是在调用中对结果进行类型化。在Angular 6中，最简单的方法是什么以获得强类型数据？下面的代码不起作用，我真的需要手动映射每个属性吗？\n我的模型：\n

export interface MenuItem {
    menuItemsId: number;
    groupCode: number;
    groupDescription: string;
    subGroupCode: number;
    subGroupDescription: string;
    itemCode: number;
    itemDescription: string;
    grade: string;
    remark: string;
}

\n我的服务：\n

getValues(): Observable {
    return this.httpClient.get("https://hafnia-asset-control-dev.azurewebsites.net/api/menuitems/cosmetic");  
}

\n调用：\n

var t = this.apiService.getValues().subscribe((data) => {
    this.menuItems = data;
    console.log(this.menuItems);
});

\nJSON结果：\n[{\"menuItemsId\":1,\"groupCode\":1000,\"groupDescription\":\"xxx\",\"subGroupCode\":1000,\"subGroupDescription\":\"SHELL\",\"itemCode\":1001,\"itemDescription\":\"ccc\",\"grade\":\"Int\",\"remark\":\"String\"},{\"menuItemsId\":2,\"groupCode\":1000,\"groupDescription\":\"COSMETIC\",\"subGroupCode\":1000,\"subGroupDescription\":\"xxx\",\"itemCode\":1002,\"itemDescription\":\"xxx\",\"grade\":\"Int\",\"remark\":\"String\"}]\n\napp.module：\n

providers: [AdalService, AdalGuard, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],

\n拦截器：\n

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpRequest, HttpInterceptor } from '@angular/common/http';
import { AdalService } from 'adal-angular4';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private adalService: AdalService) { }
    intercept(req: HttpRequest, next: HttpHandler): Observable> {
        const authHeader = this.adalService.userInfo.token;
        const authReq = req.clone({ headers: req.headers.set('Authorization', `Bearer ${authHeader}`) });
        return next.handle(authReq);
    }
}

0

1 答案

0 Comments

Angular 6和类型化的API数据问题的原因和解决方法

在Angular开发中，我们经常会遇到需要从API获取数据并在代码中使用的情况。在这种情况下，我们通常会使用HttpClient模块来发送HTTP请求，并通过类型断言的方式将返回的数据转换为特定的类型。然而，这种类型断言只是在编译时起作用，而在运行时并不会真正创建一个特定类型的实例。

如果我们只是想要使用这个类型来做一些类型检查或者防止错误使用对象的属性，那么这种类型断言是可以接受的。但是，如果这个类型包含了非静态函数、getter、setter等需要在实例化对象上调用的方法，那么我们需要采取一些额外的措施来确保在运行时能够获得真正的类型实例。

解决这个问题的方法是，在调用API获取数据时，使用map操作符将返回的数据映射为特定类型的实例。具体的做法是，在HttpClient的get方法中传入特定类型，并在获取到数据后使用map操作符将数据映射为特定类型的实例。同时，我们还需要为特定类型添加一个构造函数，用于接收从API获取的数据，并将其赋值给实例的属性。

示例代码如下：

class YourType {
   // Properties...
   constructor(obj: any) {
      Object.assign(this, obj);
   }
}
this.httpClient.get("url").pipe(map(x => new YourType(x)))

通过这种方式，我们可以在运行时获得真正的类型实例，而不仅仅是在编译时进行类型检查。

需要注意的是，如果我们的类型只包含属性而没有方法，那么使用接口(interface)来定义类型可能更合适。因为在编译为Javascript代码后，类型信息将被移除，对象会以字面量对象的形式出现。

总结起来，当我们在Angular中使用HttpClient模块获取API数据时，如果我们需要在运行时获得真正的类型实例，而不仅仅是进行类型检查，我们需要使用map操作符将返回的数据映射为特定类型的实例，并为该类型添加一个构造函数。这样，我们就可以在代码中使用真正的类型实例，并调用其方法和属性。

希望本文对你理解Angular 6和类型化API数据问题有所帮助。如果还有疑问，请随时提问。

0