用http get在角6中处理复杂对象
用http get在角6中处理复杂对象
提问于 2018-05-25 08:24:00
我不知道如何处理订阅对象。对象是以下结构：
{
data:{
date: "2018-02-20 13:10:23",
text: "Описание",
id: 1,
items: [
0: {
date: "2018-02-20 13:10:23",
text: "Описание",
images: [
0: "image1.jpg",
1: "image2.jpg"
],
name: "Изображения",
type: "images"
},
1: {
date: "2018-02-20 13:10:23",
text: "Описание",
image: null,
type: "video",
url: "https://www.youtube.com/embed/v64KOxKVLVg"
}
]
}
}我通过这项服务发出呼吁：
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
@Injectable()
export class VideoService {
constructor(private http: HttpClient) {}
getVideoTape() {
return this.http.get(`http://ip_adress/api/v1/mixed_galleries/1`);
}
}有一个接口模型：
export class VideoListModel {
constructor(
public created_at: string,
public description: string,
public id: number,
public items: any[],
public name: string
) {}
}我在组件中进行处理：
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Observable, Subscription} from 'rxjs';
import {filter} from 'rxjs/operators';
import {VideoService} from '../shared/services/video.service';
import {VideoListModel} from '../../shared/models/video-list.model';
@Component({
selector: 'app-video-index',
templateUrl: './video-index.component.html',
styleUrls: ['./video-index.component.scss']
})
export class VideoIndexComponent implements OnInit, OnDestroy {
private videoTape = [];
private _subscription2: Subscription;
constructor( private videoService: VideoService ) { }
ngOnInit() {
this._subscription2 = this.videoService.getVideoTape()
.subscribe((data: VideoListModel[]) => {
this.videoTape = data;
console.log(this.videoTape);
});
}
ngOnDestroy() {
this._subscription2.unsubscribe();
}
}任务是按类型从对象中选择“视频”。通过AJAX + jQuery，它没有问题，而且在角度上，我还是比较新的。昨天铲平了一堆视频课程，但是没有任何一个例子可以过滤这样复杂的对象。
建筑：
this._subscription2 = this.videoService.getVideoTape()
.pipe(filter((data: VideoListModel[]) => data.items.type === 'video'))
.subscribe((data: any) => {
this.videoTape = data.data;
console.log(this.videoTape);
});不管用。结果是错误地说'VideoListModel []‘类型上不存在"Property 'items’“。从直觉上讲，我理解这个问题最有可能发生在界面上，但我无法理解如何修改接口，使过滤工作正常。如果有人遇到过滤复杂的对象，请告诉我如何解决这个问题。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-25 08:44:28
对象中没有一个VideoModels数组，而是一个items数组。将整个内容传递到筛选器中，可以将项从数组中筛选出来，但您有一个对象。您可以尝试以下解决方法：
创建像这样的接口
interface Item {
date: Date;
text: string;
images: string[];
name: string;
type: string;
}
export interface VideoModel {
data: {
date: Date;
text: string;
id: number;
items: Item[];
}
}然后，您可以在服务中使用HttpClient，如下所示
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
[...]
getVideoTape(): Observable<VideoModel> {
return this.http.get<VideoModel>(url).pipe(
map(model => {
const items = model.data.items.filter(item => item.type === 'video');
model.data.items = items;
return model;
}),
catchError(error => console.error(error))
);
}注意您的图像数组，因为它不是有效的json，string[]？为了减少流量，过滤服务器端的类型不是更好吗？
Stack Overflow用户
发布于 2018-05-25 08:39:15
您的json数据无效。
它应该是
{
"data":{
"date": "2018-02-20 13:10:23",
"text": "tt",
"id": 1,
"items": [
{
"date": "2018-02-20 13:10:23",
"text": "Описание",
"images": [
"image1.jpg",
"image2.jpg"
],
"name": "Изображения",
"type": "images"
},
{
"date": "2018-02-20 13:10:23",
"text": "Описание",
"image": null,
"type": "video",
"url": "https://www.youtube.com/embed/v64KOxKVLVg"
}
]
}
}然后去http://json2ts.com/
你的模特
export interface Item {
date: string;
text: string;
images: string[];
name: string;
type: string;
image?: any;
url: string;
}
export interface Data {
date: string;
text: string;
id: number;
items: Item[];
}
export interface VideotapeAnswer {
data: Data;
}Stack Overflow用户
发布于 2018-05-25 08:48:42
如果您说data是一个类型为VideoListModel的array，则原因数组没有属性items。您所做的就像Array.items.type，这是没有意义的。可能有更好的解决方案，但是尝试将结果数组映射到一个可以观察到的位置，您可以在那里使用过滤器。
this._subscription2 = this.videoService.getVideoTape()
.pipe(
map(data => from(data).pipe(filter((d: VideoListModel) => d.items.type === 'video')))
tap(data => data.subscribe(d => {
this.videoTape.push(d);
}))
).subscribe();另外，在使用角版4+时，可以像这样映射数据
getVideoTape() {
return this.http.get<VideoListModel[]>(`http://ip_adress/api/v1/mixed_galleries/1`);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50524711
复制相关文章
相似问题
腾讯云开发者
