【发布时间】：2019-04-03 23:08:34
【问题描述】：
我开始使用 Angular7，并按照教程构建应用程序，从 Web 服务获取输入并将结果放入对象数组中。
只要数据已经以数组的形式出现，它就可以工作。 当数据为 JSON 格式时，它会停止工作。
问题是我在网上论坛上找到的所有答案都包括使用地图功能，当我使用它时，在包含相应的定义文件（来自rxjs/operators）后，我总是得到错误
“groups.map 不是函数”。
另一个问题是我继续为旧版本的 Angular 寻找解决方案，但显然不再适用了。
我正在使用 Angular 7.2.11、typescript 3.2.4、rxjs 6.3.3 和 webpack 4.29.0，而不是之前的众多版本。
我面临的问题应该是一个非常常见的问题：从 REST 服务器以 JSON 格式（嵌套和类型化）获取数据，并将数据放入应用程序所需的数据结构（类）中以执行各种任务.
有人建议放弃 TrueScript 类，直接使用 http.get 调用返回的 JSON 对象。
如果这确实是最佳实践，我想知道如何处理我发布的示例中的 JSON 对象。
我试图完全简化对 http get 的调用：
getGroups(): Observable<Group[]> {
this.http.get(this.groupsUrl)
.subscribe(data => {console.log(data);
});
}
Web 控制台向我显示groups.service.ts 中正确加载的数组“组”。
但是，将数组映射到应用程序对象的下一步不起作用。
这是课程：
export class Group {
public dn: string;
public cn: string[];
public name: string[];
public member: string[];
constructor(args: {
dn: string,
cn: string[],
name: string[],
member: string[]
}) {
this.dn = args.dn
this.cn = args.cn;
this.name = args.name;
this.member = args.member;
}
}
这是服务：
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Group } from './group';
import { MessageService } from './message.service';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
export class GroupService {
private groupsUrl = '../assets/groups.json';
groups: Group[];
constructor(
private http: HttpClient,
private messageService: MessageService) { }
getGroups(): Observable<Group[]> {
return this.http.get<Group[]>(this.groupsUrl).pipe(
map(groups => groups.map(groupJson => new Group(groupJson))));
}
}
这是组件：
getGroups(): void {
this.groupService.getGroups()
.subscribe(groups => this.groups = groups)
}
这是json文件：
{
"groups": [
{
"dn": "CN=mycn,OU=Groups,OU=valiant,OU=Organizations,DC=rag,DC=net",
"cn": [
"mycn"
],
"name": [
"mycn"
],
"member": [
"changz",
"gorkony",
"martoks",
"azetburn"
]
},
...
]
}
对于那些有同样问题的人，我在这里发布在用户 Hari Prathap 的帮助下构建的解决方案：
groups: Group[];
getConfig() {
return this.http.get(this.configUrl).pipe(
map(res => {
return {
errMessage: res.errmessage,
errCode: res.errcode,
groups: res.data.groups.map(obj => new Group(obj))
};
})
);
}
ngOnInit() {
this.getConfig().subscribe(ret => {
console.log("errCode", ret.errCode);
console.log("errMessage", ret.errMessage);
console.log("groups", ret.groups);
this.groups = ret.groups;
console.log("Group 1", this.groups[1]);
});
}
解决问题的关键是指出 http.get 函数的返回值代表了来自 REST 服务器的整个响应，而不是我感兴趣的组部分。
可以使用“.”访问组部分。运算符，尽管 IDE 和编译器都不知道在编译时读取的 JSON 的确切结构。
事实上，编译器会发出一个错误，但代码仍然可以工作。 然后可以将通过这种方式从响应中提取的组映射到一个对象数组中，该数组与 JSON 文件中的数组具有相同的结构。
使用这个符号可以避免这个错误：
groups: res["data"].groups.map(obj => new Group(obj))
【问题讨论】：
-
map(groups => groups.map(groupJson => new Group(groupJson))));中的组是对象还是数组？如果 groups 是一个对象，那么 groups.map 将不起作用。 -
groups 是一个 Group 数组，它是这样定义的：
groups: Group[];