如何在Angular中返回服务中json键内的数组？

我一直在学习angular中的英雄教程，然后我想把它应用到我的小测试项目中来巩固它。当我将它与内置的http服务器和一些模拟项一起使用时，它工作了，但现在我无法从另一个Django REST API检索我想要的项

我可以测试这是我的API，并且可以正常工作：

curl-H'Accept:application/json；缩进=4'http://127.0.0.1:5000/inventory/items_viewset/ -L
{
“计数”：13，
“下一步”：http://127.0.0.1:5000/inventory/items_viewset/?page=2",
“先前”：空，
“结果”：[
{
“标签”：“00004”，
“名称”：“Test2”，
“说明”：“222”，
“所有者”：“管理员”，
“照片”：空
},
{
“标签”：“0000007”，
“名称”：“Test1”，
“notes”：空，
“照片”：http://127.0.0.1:5000/media/item_images/2021/02/19/IMG_20210207_134147.jpg"
},
]
}

然后我有我的物品

Item.ts

导出接口项{
标签：字符串；
名称：字符串；
注：字符串；
}

我有一个显示这些项目的组件

items.component.ts

：

项目：项目[]；
构造函数（private-itemService:itemService，private-messageService:messageService）{}
//构造函数（）{}
ngOnInit（）：void{
这是getItems（）；
}
getItems（）：void{
this.itemService.getItems（）
.subscribe（items=>this.items=items）；
}

在这里，我有一个服务，我正在尝试做改变

从'@angular/core'导入{Injectable}；
从“./Item”导入{Item}；
从“./mock ITEMS”导入{ITEMS}；
从'rxjs'导入{可观察的}；
从“./message.service”导入{MessageService}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs/operators”导入{catchError，tap，map}；
@注射的({
providedIn:'根'
})
导出类项目服务{
构造函数（私有http:HttpClient，私有messageService:messageService）{}
私人物品http://127.0.0.1:5000/inventory/items_viewset“；//指向web api的URL
httpOptions={
标题：新的HttpHeaders（{'Content-Type'：'application/json'，}）
};
getItems（）：可观察{
返回this.http.get（this.itemsUrl）.pipe(
映射（res=>res），
点击（=>this.log（'fetched items'）），
catchError（this.handleError（'getItems'，[]））
);  
}
/**
*处理失败的Http操作。
*让应用程序继续。
*@param operation-失败的操作的名称
*@param result-作为可观察结果返回的可选值
*/
私有句柄错误（操作='operation'，结果？：T）{
返回（错误：任意）：可观察=>{
//TODO:将错误发送到远程日志记录基础结构
console.error（error）；//改为登录到控制台
//TODO：更好地转换错误以供用户使用
此.log（`operation}失败：${error.message}`）；
console.error（`operation}失败：${error.message}`）；
//通过返回空结果让应用程序继续运行。
返回（结果为T）；
};
}
/**使用MessageService记录HeroService消息*/
私有日志（消息：字符串）{
add（`ItemService:${message}`）；
}
}

这可能有点混乱，因为我删除了不相关的东西，但自从我切换到真正的API以来，我一直在工作的唯一一点是这个方法：

getItems（）：可观察{
返回this.http.get（this.itemsUrl）.pipe(
映射（res=>res），
点击（=>this.log（'fetched items'）），
catchError（this.handleError（'getItems'，[]））
);  
}

我已经有一天多的空闲时间试图解决这个问题，但我无法找到如何从JSON中访问键

结果

，以便将其映射到项目。我发现的大多数类似问题都使用了一个函数

.json（）

，我想我已经理解了，这个函数在

HttpClient

中不再使用了。然后我也尝试了许多形式，比如

res.results

，但没有成功，我得到一个例外，即该属性不存在

查询正在运行，就好像我将抽头行更改为：

tap(_ => console.log(_)),

我得到了一个错误的对象

---

有人能告诉我我做错了什么吗？。我不知道还有什么地方可以搜索我无法从教程中找到它，我认为文档中也没有涵盖这一点，我认为它应该非常简单，但是我不知道如何进一步调试。

我想我终于可以让它工作了，但是如果我想在很多地方使用这个函数，我不知道这是否是正确的方法，因为我需要组件中的很多代码，但是如果我处理分页请求，我可能还需要其他参数

根据@jornsharpe的建议，我删除了

项

，并将其更改为

any

，然后我可以在组件中的响应中进行一些解析： 在我的服务中，我有

item.service.ts

：

getAllItems（）：可观察{
返回this.http.get（this.itemsUrl）.pipe(
点击（=>this.log（'fetched items'）），
catchError（this.handleError（'getItems'，[]））
);  
}

在我的组件中，我使用JSON

items.component.ts

：

项目：项目[]；
下一步：字符串；
上一个：字符串；
ngOnInit（）：void{
这是getItems（）；
}
getItems（）{
此.itemService.getAllItems（）.subscribe(
res=>{
控制台日志（res）；
如果（结果）{
此项=结果；
}
如果（下一项决议）{