rxjs - Angular7:如果模型与 JSON 不同,订阅 Observable 时如何正确映射数据
问题描述
我正在向 REST API 发出 GET 请求。我的模型类与请求的 JSON 略有不同,我似乎无法获取任何数据:当我登录控制台时,我的模型对象未定义。订阅 observable 时如何正确映射值?
我的模型:
export class Signalement {
idsignalement: number;
destinataire_id: number;
idstatut: number;
iddomaine: number;
idlocalisation: number;
idtype: number;
idemetteur: number;
x: number;
y: number;
nom: string;
description: string;
descriptionlieu: string;
la_date: string;
}
我的 JSON :
{
"_embedded": {
"signalements": [
{
"idsignalement": 1,
"iddomaine": 1,
"idlocalisation": 1,
"idtype": 1,
"idemetteur": 1,
"idstatut": 1,
"x": 1,
"y": 1,
"nom": "Postman Signalement",
"description": "Envoie depuis postman",
"descriptionlieu": "Sur la VM",
"la_date": "2019-02-08T09:25:36.968+0000",
"_links": {
"self": {
"href": "***/signalements/1"
},
"signalement": {
"href": "***/signalements/1"
},
"destinataire": {
"href": "**/signalements/1/destinataire"
}
}
}
]
},
"_links": {
"self": {
"href": "***:8080/signalements{?page,size,sort}",
"templated": true
},
"profile": {
"href": "http://***/profile/signalements"
}
},
"page": {
"size": 20,
"totalElements": 1,
"totalPages": 1,
"number": 0
}
}
我的组件:
export class SignalementsComponent implements OnInit {
signalements: Signalement[];
constructor(private signalementService: SignalementService, private messageService: MessageService) { }
ngOnInit() {
this.getSignalements();
}
getSignalements(): void {
this.signalementService.getSignalements().subscribe((data) => {
this.signalements = data;
});
}
我的服务:
export class SignalementService {
constructor(private http: HttpClient) { }
getSignalements(): Observable<Signalement[]> {
return this.http.get<Signalement[]>(href);
}
}
解决方案
你不能这样做return this.http.get<Signalement[]>(href);
,因为你收到的数据不是一个Signalement
对象。
请记住,javascript 不是类型化的,因此您在 Typescript 中输入的类型指示只是您编码的助手,而不是实际强制执行的规则。
鉴于您的答案架构,您应该首先深入研究_embedded
领域。所以你应该这样做:
return this.http.get<Signalement[]>.pipe(map(data => data['_embedded']['signalments']));
您还应该添加检查以验证字段确实存在并且格式正确,以避免取决于潜在数据源等的安全问题。
推荐阅读
- javascript - 音频流在它应该之前突然结束(onEnded)
- javascript - 由于波浪号“~”,Asp.Net Core 3.1 引用不起作用
- javascript - 如果函数内部发生错误,表单提交将停止
- r - 如何根据时间序列中的条件修改列?
- scala - 使用 Scala 案例类为 Spark Table 生成动态标题
- pandas - 使用 pandas 数据框将坐标字符串拆分为 X 和 Y 列
- pytorch - 当我使用 clone() 时仍然出现就地操作错误
- python - Django 中的搜索字段未重定向到详细视图
- c# - 在不等待的情况下调用异步方法会阻止其余 ASP.NET Core 服务的执行
- powershell - 使用 .Open 在 PowerShell 中使用 Microsoft Word COM 对象配置默认参数