Angular 8 - HttpClient GET 一个复杂的 JSON 对象

Question

我正在使用 Angular 8，并且正在查询端点以获取权限对象。 当我通过邮递员调用它时，我得到以下返回的 JSON：

获取https://endpoint/@{xxx}/permissions

返回：

{
"continents": {
"order": 2,
"actions": {
"show": true
},
"children": {}
},
"car manufacturers": {
"order": 3,
"actions": {
"show": true
},
"children": {}
},
"products": {
"order": 1,
"actions": {
"show": true,
"getItems": {
"type": "GET",
"URL": "https://endpoint/@{xxx}/products"
},
"updateItem": {
"type": "PUT",
"URL": "https://endpoint/@{xxx}/products/{id}"
},
"addItem": {
"type": "POST",
"URL": "https://endpoint/@{xxx}/products"
}
},
"slug": "/products/",
"children": {}
}
}

在 Angular 8 中，我有一个服务，我想在其中对将返回上述 JSON 的端点进行 http 调用。

// GET
GetIssues(): Observable<Permissions> {
return this.http.get<Permissions>(this.baseurl + '/permissions/')
.pipe(
retry(1),
catchError(this.errorHandl)
)
}

如您所见，结果需要放入Permissions对象中。

问题

在 TypeScript 中，这个Permissions对象应该是什么样子的？

export class Permissions {
...
}

我感谢您的帮助。

Answer 1

您必须根据打字稿基本类型添加响应 json 模式

01-简单的方法，如果您使用的是Visual Studio Code，则可以添加粘贴JSON作为代码库

02-或者您可以复制粘贴所有json并删除引号并将值更改为类型，请检查简单的模式，您可以将对象更改为类并将其引用添加到权限类中

export class Permissions {
continents: {
order: number;
actions: {
show: true;
};
children: {};
};
'car manufacturers': {
order: number;
actions: {
show: boolean;
};
children: {};
};
products: {
order: number,
actions: {
show: boolean,
getItems: {
type: string,
URL: string
},
updateItem: {
type: string,
URL: string
},
addItem: {
type: string,
URL: string
}
},
slug: string ,
children: {}
};
}

要访问car manufacturers值，您必须通过方括号访问它，因为它在 =>permission['car manufacturers']之间有空格

对于儿童对象，如果您还不知道它是架构，您可以通过以下代码定义我有任何键和任何值

children: {
[key: string]: any
};

---

面向对象的架构

class Permissions {
continents:          CarManufacturers;
"car manufacturers": CarManufacturers;
products:            Products;
}
class CarManufacturers {
order:    number;
actions:  CarManufacturersActions;
children: Children;
}
class CarManufacturersActions {
show: boolean;
}
class Children {
}
class Products {
order:    number;
actions:  ProductsActions;
slug:     string;
children: Children;
}
class ProductsActions {
show:       boolean;
getItems:   AddItem;
updateItem: AddItem;
addItem:    AddItem;
}
class AddItem {
type: string;
URL:  string;
}