Angular 将接口映射到json数据

我有一个接口INavigation，它的字段名与JSON数据中的字段不同。如何将字段从接口映射到JSON数据

代码如下：

无活力

export interface INavigation {
  Id: number;
  AppId: number;
  NavId: number;
  Name: string;
  ParentId: string;
  PageURL: string;
  Position: string;
  Active: string;
  Desktop: string;
  Tablet: string;
  Phone: string;
  RoleId: string;
  Target: string;
}

JSON数据：

{
    "Id": 1,
    "NavAppId": 1,
    "NavId": "1FGP",
    "NavName": "Home",
    "NavParentId": "",
    "NavPageURL": "?p=home",
    "NavPosition": "Top",
    "NavActive": "Y",
    "NavDesktop" : "Y",
    "NavTablet" : "N",
    "NavPhone": "Y",
    "NavRoleId" : "6,17,28,43,44,49,50,59,60,63,64,77,78,79,80,81",
    "NavTarget": "_parent"
}

以下是服务中从JSON文件获取数据的方法：

   getNavigations(appId: any): Observable<Array<INavigation>> {
      return this.httpClient.get<Array<INavigation>>('../assets/navigations.json')
                  .pipe(
                    map(data => data.filter(navigation => navigation.NavAppId === appId))
                  );

   }

getNavigations（appId:any）：可观察{
返回此.httpClient.get（“../assets/navigations.json”）
.烟斗(
地图（数据=>data.filter（导航=>navigation.NavAppId===appId））
);
}

如何更改iVigation界面中的属性？使用与JSON数据相同的名称。 以下是我的示例（角度）： 我的邮政编码：

     getPosts(){
    return this.http.get('https://jsonplaceholder.typicode.com/posts').map(res =>res.json());
  }

在component.ts文件中，我导入服务，然后：

pos:po[];
constructor(private postsService:PostsService) {

    // get object from url.
    this.postsService.getPosts().subscribe(posts=>{
      console.log(posts);
      this.pos=posts;
    })
   }

        interface po{
      id:number;
      title:string;
      body:string;
    }

我从url获取的JSON数据与我的po接口具有相同的属性。我想这就是你的代码不起作用的原因。

这应该能满足你的需要

映射操作如下所示：

map((data: any[]) => {
  return data.map((navigation: any) => {
    return <INavigation> {
      Id: navigation.Id,
      AppId: navigation.NavAppId,
      NavId: navigation.NavId,
      Name: navigation.NavName,
      ParentId: navigation.NavParentId,
      PageURL: navigation.NavPageURL,
      Position: navigation.NavPosition,
      Active: navigation.NavActive,
      Desktop: navigation.NavDesktop,
      Tablet: navigation.NavTablet,
      Phone: navigation.NavPhone,
      RoleId: navigation.NavRoleId,
      Target: navigation.NavTarget
    }
  })
})

map（（数据：any[]）=>{
返回data.map（（导航：any）=>{
返回{
Id:navigation.Id，
AppId:navigation.NavAppId，
NavId:navigation.NavId，
名称：navigation.NavName，
ParentId:navigation.NavParentId，
PageURL:navigation.NavPageURL，
位置：navigation.NavPosition，
活动：navigation.NavActive，
桌面：navigation.NavDesktop，
Tablet:navigation.NavTablet，
电话：navigation.NavPhone，
RoleId:navigation.NavRoleId，
目标：navigation.NavTarget
}
})
})

此外，您可能希望使用实现接口的类，该接口在构造函数中接受JSON对象并在那里进行映射。这将使重用变得容易。您可以在这个备选方案中看到如何做到这一点

---

当然，您可以完全跳过使用接口，只使用类。

我正在为您编写stackblitz。同时，您的接口定义Id twiceI当前的接口属性与JSON数据的名称相同。但是我想看看如何在接口和JSON数据之间保持属性名称的不同，我不确定它是否可以工作。您在网上找到任何示例了吗？下面是一个示例：。不过，我不确定我需要对服务中的方法做哪些更改。使用

any

感觉像是一种懒惰的方法，特别是考虑到您确实知道json文件中的对象是什么样子的，那么什么时候在接口上使用类是一种最佳实践呢？大多数语言中的接口都描述了类的属性。当您想要添加功能时，类很有用。接口只定义属性。