Question

我想检索与电影ID相比的这些活动的列表。

为此，在我的Api中，我有一个请求，让我可以检索出事清单。

JSON请求

{
"seances": [{
  "id": 1,
  "date": "2019-02-25 14:36:54",
  "movie": {
    "id": 1,
    "title": "Stargate : La porte des étoiles",
    "date": "1994-10-27",
    "poster": "Contacté par l'armée américaine, le jeune égyptologue de génie, Daniel Jackson, résout en 1994 l'énigme du gigantesque anneau de pierre et d'acier découvert en 1928 sur le site de la grande pyramide de Gizeh. Cette mission va le projeter à des années-lumière de la Terre chez des extra-terrestres qui ont construit les Pyramides. Un nouveau monde s'ouvre alors ..."
  },
  "room": {
    "id": 1,
    "name": "Super salle",
    "blueprint": "un plan",
    "placenumber": 12,
    "techno": {
      "id": 1,
      "name": "IMAX"
    }
  }
},
{
  "id": 2,
  "date": "2019-02-25 14:36:54",
  "movie": {
    "id": 1,
    "title": "Stargate : La porte des étoiles",
    "date": "1994-10-27",
    "poster": "Contacté par l'armée américaine, le jeune égyptologue de génie, Daniel Jackson, résout en 1994 l'énigme du gigantesque anneau de pierre et d'acier découvert en 1928 sur le site de la grande pyramide de Gizeh. Cette mission va le projeter à des années-lumière de la Terre chez des extra-terrestres qui ont construit les Pyramides. Un nouveau monde s'ouvre alors ..."
  },
  "room": {
    "id": 1,
    "name": "Super salle",
    "blueprint": "un plan",
    "placenumber": 12,
    "techno": {
      "id": 1,
      "name": "IMAX"
    }
  }
},
{
  "id": 3,
  "date": "2019-02-25 14:36:54",
  "movie": {
    "id": 2,
    "title": "Stargate : La porte des étoiles",
    "date": "1994-10-27",
    "poster": "Contacté par l'armée américaine, le jeune égyptologue de génie, Daniel Jackson, résout en 1994 l'énigme du gigantesque anneau de pierre et d'acier découvert en 1928 sur le site de la grande pyramide de Gizeh. Cette mission va le projeter à des années-lumière de la Terre chez des extra-terrestres qui ont construit les Pyramides. Un nouveau monde s'ouvre alors ..."
  },
  "room": {
    "id": 1,
    "name": "Super salle nul",
    "blueprint": "un plan",
    "placenumber": 12,
    "techno": {
      "id": 1,
      "name": "IMAX"
    }
  }
}]
}

例如，我想获取ID = 1的电影的序幕列表。

我编写了这段代码，以获取组件中具有特定电影ID的节目列表：

ngOnInit() {
   this.id = this.route.snapshot.params.id;
   this.sceanceService.list().pipe(
      map(model => {
         return model.filter(movies => movies.movie.filter(movieid => movieid.id === this.id));
      })
      ).subscribe(data => {
         this.sceance = data;
   });
}

此服务SceanceService的详细信息

export class SceanceService extends ApiService<number, Sceance> {
   constructor(private http: HttpClient) {
      super(http, 'sceances');
   }
}

此服务的详细信息Api服务

export class ApiService<I, T extends Resource<I>> {

  constructor(
    private httpClient: HttpClient,
    private endpoint: string
  ) { }
  list(): Observable<T[]> {
    return this.httpClient.get<T[]>(`${API_BASE_URL}/${this.endpoint}`);
  }

  create(item: T): Observable<T> {
    return this.httpClient
      .post<T>(`${API_BASE_URL}/${this.endpoint}`, item);
  }

  update(item: T): Observable<T> {
    return this.httpClient
      .put<T>(`${API_BASE_URL}/${this.endpoint}/${item.id}`, item);
  }

  get(id: I): Observable<T> {
    return this.httpClient.get<T>(`${API_BASE_URL}/${this.endpoint}/${id}`);
  }

  delete(id: I) {
    return this.httpClient.delete(`${API_BASE_URL}/${this.endpoint}/${id}`);
  }
}

我的模特班

export class Sceance {
    id: number;
    date: Date;
    movie: Movie[] = [];
    room: Room[] = [];
}
export class Movie {
    id: number;
    title: string;
    date: Date;
    poster: string;
}
export class Room {
    id: number;
    name: string;
    blueprint: string;
    placeLenght: number;
    techno: Techno[] = [];
}
export class Techno {
    id: number;
    name: string;
}

在构建项目时，我得到了这个调用栈：

ERROR TypeError: movies.movie.filter is not a function
    at sceance-container.component.ts:25
    at Array.filter (<anonymous>)
    at MapSubscriber.project (sceance-container.component.ts:25)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)

我不明白为什么浏览器无法使用过滤器功能（

）。

您是否知道问题可能来自何处？

您知道恢复此类信息的更好方法吗？

编辑

添加模型类

Answer 1

您的模型不正确，seances具有movie而不是movies数组，因此.filter实际上不是函数。您需要像这样更正您的Sceance类。房间也是如此，您的JSON示例仅包含一个房间，而不包含多个房间。

export class Sceance {
    id: number;
    date: Date;
    movie: Movie;
    room: Room;
}

Angular 7：在Json请求中获取特定的子对象

1 个答案: