分析/映射Angular 7 API对模型类的响应

Question

我是Angular的新手。如果我遗漏了什么，请原谅。

我正在尝试进行API调用。为此，我创建了一个名为base.service.ts的基本服务类(下面需要代码)-

public get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
return this.httpClient.get(BASE_URL + path, { params }).pipe(catchError(this.formatErrors));
}

我还创建了一个名为visitor.service.ts的新服务类，从中调用基本服务的get方法，如下所示-

export class VisitorService {
constructor(private baseService: BaseService) { }
getVisitors(): Observable<Visitor[]> {
return this.baseService.get(String.Format(Globals.endpoints.visitors));
}
}

从我的组件类dashboard.component.ts我加载这个访问者列表-

export class DashboardComponent implements OnInit {
constructor(private visitorService: VisitorService) { }
ngOnInit() {
this.loadTodaysVisitors();
}
private loadTodaysVisitors() {
this.visitorService.getVisitors().subscribe(
data => {
console.log(data)
}
);
}
}

我的第一个问题是，当我运行此代码时，我没有看到控制台上记录的任何内容。为什么？

此外，我的回复将采用以下格式-

[
{
"visitor": {
"attendeeFirstName": "ABC",
"attendeeSurname": "XYZ",
},
"visitorcheckin": [
{
"field": value,
"field1": value1,
},{
"field": value,
"field1": value1,
}
],
"visitorcheckout": [
{
"field": value,
"field1": value1,
},{
"field": value,
"field1": value1,
}
]
},
{
"visitor": {
"attendeeFirstName": "DEF",
"attendeeSurname": "PQR",
},
"visitorcheckin": [
{
"field": value,
"field1": value1,
},{
"field": value,
"field1": value1,
}
],
"visitorcheckout": [
{
"field": value,
"field1": value1,
},{
"field": value,
"field1": value1,
}
]
},
]

我为这个名为visitor.model.ts-的访问者创建了一个模型

import { Deserializable } from '../interfaces/deserializable.interface';
export class Visitor implements Deserializable {
attendeeFirstName: string;
attendeeSurname: string;
deserialize(input: any): this {
Object.assign(this, input);
return this;
}
}

desrializable.interface.ts文件-

export interface Deserializable {
deserialize(input: any): this;
}

这是为上述类型的响应结构创建模型的正确方法吗？此外，我如何将响应映射到我的模型对象，以及如何在dashboard.component.ts中使用它们？

谢谢！

Answer 1

您的JSON无效，我已经更正了它，应该如下所示，

[{"访问者"：{"atteeFirstName"："ABC"，"与会者姓氏"："XYZ"}，"visitorcheckin"：[{"字段"："值"，"field1"："值"}，{"字段"："值"，"field1"："值"}]，"visitorcheckout"：[{"字段"："值"，"field1"："值"}，{"字段"："值"，"field1"："值"}]}，{"访问者"：{"atteeFirstName"："DEF"，"与会者姓氏"："PQR"}，"visitorcheckin"：[{"字段"："值"，"field1"："值"}，{"字段"："值"，"field1"："值"}]，"visitorcheckout"：[{"字段"："值"，"field1"："值"}，{"字段"："值"，"field1"："值"}]}]

您可以使用JSON2TS为您的模型创建接口，结果接口如下，

declare module namespace {
export interface Visitor {
attendeeFirstName: string;
attendeeSurname: string;
}
export interface Visitorcheckin {
field: string;
field1: string;
}
export interface Visitorcheckout {
field: string;
field1: string;
}
export interface RootObject {
visitor: Visitor;
visitorcheckin: Visitorcheckin[];
visitorcheckout: Visitorcheckout[];
}
}