Angular 6中HTTP GET处理复杂对象并筛选视频类型项的问题

首先，咱们拆解下你遇到的核心问题，一步步来解决：

1. 接口模型与API返回结构不匹配 #

你的VideoListModel字段和API实际返回的数据完全对不上，而且API返回是嵌套了data的对象（不是直接返回数组），items里的子对象也没有对应的类型定义——这是类型报错的主要根源。

先重新定义匹配API结构的类型：

// 定义items里的子项类型，用联合类型区分图片和视频项
type GalleryItem = 
  | {
      date: string;
      text: string;
      images: string[];
      name: string;
      type: "images";
    }
  | {
      date: string;
      text: string;
      image: null;
      type: "video";
      url: string;
    };

// 定义API返回中data部分的模型
export class GalleryModel {
  constructor(
    public date: string,
    public text: string,
    public id: number,
    public items: GalleryItem[]
  ) {}
}

// 定义顶层API响应模型
export interface GalleryResponse {
  data: GalleryModel;
}

2. RxJS操作符使用错误 #

你用了filter操作符，但这个操作符是用来过滤Observable流中的整个数据对象，不是过滤数组里的元素。要筛选items中type="video"的项，得先用map提取数据，再对数组使用原生的Array.filter。

3. 组件订阅逻辑修正 #

修改组件代码，正确处理API响应并筛选视频项：

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {map} from 'rxjs/operators';
import {VideoService} from '../shared/services/video.service';
import {GalleryResponse, GalleryItem} from '../../shared/models/gallery.model'; // 引入新模型

@Component({
  selector: 'app-video-index',
  templateUrl: './video-index.component.html',
  styleUrls: ['./video-index.component.scss']
})
export class VideoIndexComponent implements OnInit, OnDestroy {
  private videoTape: GalleryItem[] = []; // 直接存筛选后的视频项
  private _subscription2: Subscription;

  constructor(
    private videoService: VideoService
  ) { }

  ngOnInit() {
    this._subscription2 = this.videoService.getVideoTape()
      .pipe(
        // 第一步：提取API返回的data字段
        map((response: GalleryResponse) => response.data),
        // 第二步：筛选items中type为video的项
        map(galleryData => galleryData.items.filter(item => item.type === 'video'))
      )
      .subscribe((videoItems: GalleryItem[]) => {
        this.videoTape = videoItems;
        console.log(this.videoTape); // 这里只会输出视频类型的项
      });
  }

  ngOnDestroy() {
    this._subscription2.unsubscribe();
  }
}

4. 服务的类型优化（可选但推荐） #

为了让服务返回的Observable有明确类型，修改VideoService：

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {GalleryResponse} from '../models/gallery.model';

@Injectable()
export class VideoService {
  constructor(private http: HttpClient) {}

  getVideoTape(): Observable<GalleryResponse> {
    return this.http.get<GalleryResponse>(`http://ip_adress/api/v1/mixed_galleries/1`);
  }
}

为什么之前的代码报错？ #

你之前写的filter((data: VideoListModel[]) => data.items.type === 'video')有两个问题：

• 错误地把API返回值当成了VideoListModel[]数组，但实际它是包含data字段的对象，所以data.items根本不存在
• RxJS的filter是用来判断是否保留整个流数据，不是过滤数组元素，所以必须用map配合数组的filter

这样修改后，就能正确筛选出所有type="video"的对象，而且类型检查也能正常工作~

内容的提问来源于stack exchange，提问作者Artemy Khodorev