如何解决如何在 Angular 的服务中返回 json 键内的数组？
一直在关注angular大侠的教程，后来想应用到我的小测试项目中巩固一下。当我将它与内置的 http 服务器和一些模拟项目一起使用时，它可以工作，但现在我无法从另一个 Django REST API 检索我想要的项目。
我可以测试这是我的 API 并且有效：
curl -H 'Accept: application/json; indent=4' http://127.0.0.1:5000/inventory/items_viewset/ -L
{
"count": 13,"next": "http://127.0.0.1:5000/inventory/items_viewset/?page=2","prevIoUs": null,"results": [
{
"label": "00004","name": "Test2","notes": "222","owner": "admin","photo": null
},{
"label": "0000007","name": "Test1","notes": null,"photo": "http://127.0.0.1:5000/media/item_images/2021/02/19/IMG_20210207_134147.jpg"
},]
}
然后我有我的物品 item.ts
export interface Item {
label: string;
name: string;
notes: string;
}
我有一个组件显示这些项目items.component.ts：
items: Item[];
constructor(private itemService: ItemService,private messageService: MessageService) { }
// constructor() { }
ngOnInit(): void {
this.getItems();
}
getItems(): void {
this.itemService.getItems()
.subscribe(items => this.items = items);
}
这里有我正在尝试进行更改的服务
import { Injectable } from '@angular/core';
import { Item } from './item';
import { ITEMS } from './mock-items';
import { Observable,of } from 'rxjs';
import { MessageService } from './message.service';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { catchError,tap,map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ItemService {
constructor( private http: HttpClient,private messageService: MessageService) { }
private itemsUrl = 'http://127.0.0.1:5000/inventory/items_viewset'; // URL to web api
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json',})
};
getItems(): Observable<Item[]> {
return this.http.get<Item[]>(this.itemsUrl).pipe(
map(res => res ),tap(_ => this.log('fetched items')),catchError(this.handleError<Item[]>('getItems',[]))
);
}
/**
* Handle Http operation that Failed.
* Let the app continue.
* @param operation - name of the operation that Failed
* @param result - optional value to return as the observable result
*/
private handleError<T>(operation = 'operation',result?: T) {
return (error: any): Observable<T> => {
// Todo: send the error to remote logging infrastructure
console.error(error); // log to console instead
// Todo: better job of transforming error for user consumption
this.log(`${operation} Failed: ${error.message}`);
console.error(`${operation} Failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
this.messageService.add(`ItemService: ${message}`);
}
}
这可能有点乱，因为我删除了不相关的东西，但自从我切换到真正的 API 以来，我一直在工作的唯一一点是这个方法：
getItems(): Observable<Item[]> {
return this.http.get<Item[]>(this.itemsUrl).pipe(
map(res => res ),[]))
);
}
我已经有超过一天的空闲时间尝试解决此问题，但我无法找到如何从 JSON 访问密钥 results 以将其映射到项目。我发现的大多数类似问题都使用了一个函数 .json()，我认为我已经理解它在 HttpClient 中不再使用。然后我也尝试了很多形式，比如 res.results 没有成功，我得到一个异常，该属性不存在。
查询正在运行，就像我将水龙头线更改为：
tap(_ => console.log(_)),有人可以给我一些关于我做错了什么的提示吗？我不知道还有什么地方可以搜索我无法从教程中找到它，https://angular.io/api/common/http/HttpClient 的文档我认为也没有涵盖这一点，我认为它应该很简单，但我没有知道如何进一步调试。
解决方法
我想我终于让它工作了，但如果我想在很多地方使用这个功能，我不知道这是否是正确的方法，因为我需要在组件中使用大量代码，但可能如果我在分页上工作请求我还需要其他参数。
按照@jonrsharpe 的建议，我删除了 QSurfaceFormat format;
format.setDepthBufferSize(24);
format.setVersion(3,3);
format.setProfile(QSurfaceFormat::CoreProfile);
format.setOption(QSurfaceFormat::DebugContext);
QSurfaceFormat::setDefaultFormat(format);
QOpenGLContext *context = new QOpenGLContext();
context->setFormat(format);
context->create();
并将其更改为 Item，然后我可以在组件的响应中进行一些解析：
儿子为我服务，我有any：
item.service.ts在我的组件中，我使用 JSON getAllItems(): Observable<any> {
return this.http.get(this.itemsUrl).pipe(
tap(_ => this.log('fetched items')),catchError(this.handleError<Item[]>('getItems',[]))
);
}
：
items.component.ts我不会将问题设置为已解决，因为我只是一个初学者，我不知道这是否是正确的方法。但至少它在我的场景中似乎有效。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
