在 Angular 6 中通过 http get 处理复杂对象

Question

我不明白如何处理我订阅的对象。对象是以下结构：

{
  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 没有问题，在 Angular 中我相对较新。昨天铲了一堆视频课程，但没有过滤这种复杂对象的例子。

建造：

this._subscription2 = this.videoService.getVideoTape()
          .pipe(filter((data: VideoListModel[]) => data.items.type === 'video'))
          .subscribe((data: any) => {
              this.videoTape = data.data;
              console.log(this.videoTape);
          });

不起作用。结果是一个错误，提示“属性 'items' 在类型 'VideoListModel []' 上不存在”。直觉上，我明白这个问题最有可能出在界面上，但我无法理解如何修改界面以使过滤正常工作。如果有人遇到过滤复杂对象，请告诉我如何解决这个问题。

Answer 1

您没有 VideoModel 数组，而是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[]？在服务器端过滤类型以减少流量不是更好吗？