My Observable не придерживается определенной модели In Angular

Question

Доброе утро, ребята, я новичок в Angular и Observables, я пытаюсь, чтобы мой код возвращал observabe и фильтровал список, но мой компилятор машинописного текста выдает мне ошибку. это то, что я сделал до сих пор.

Модель фильма

export interface IMovie {
  title: string,
  id: number,
  actors: [],
  url: string,
  producer: string,
  releaseDate: Date
}

movie-service.ts

 import {Injectable} from '@angular/core'
   import { IMovie } from './movies-model';

    @Injectable()
    export class MovieService {
    Movies1: IMovie[] = [
      {
        title: 'Tripple Frontier',
        id: 1,
        actors:[],
        url: 'assets/images/netflix-names/220px-Triple_Frontier.jpg',
        producer: '',
        releaseDate: new Date('24/6/2017')
      },
      {
        title: 'In the name of the father',
        id: 2,
        actors:[],
        url: 'assets/images/netflix-names/In_the_name_of_the_father.jpg',
        producer: '',
        releaseDate: new Date('15/8/2018')
      },
      {
        title: 'When we first met',
        id: 3,
        actors:[],
        url: 'assets/images/when_we_first_met.jpg',
        producer: 'Point blank',
        releaseDate: new Date('15/8/2018')
      },
      {
        title: '',
        id: 4,
        actors:[],
        url: 'assets/images/point-blank-netflix.jpg',
        producer: 'assets/images/point-blank-netflix.jpg',
        releaseDate: new Date('15/8/2018')
      }
    ]

    Movies2: IMovie[] = [
      {
        title: '',
        id: 5,
        actors:[],
        url: 'assets/images/ant-man-and-the-wasp.jpg',
        producer: '',
        releaseDate: new Date('15/8/2018')
      },
      {
        title: '',
        id: 6,
        actors:[],
        url: 'assets/images/netflix-names/vanished.jpg',
        producer: '',
        releaseDate: new Date('15/8/2018')
      },
      {
        title: '',
        id: 7,
        actors:[],
        url: 'assets/images/netflix-names/white_draggon.jpg',
        producer: '',
        releaseDate: new Date('15/8/2018')
      },
      {
        title: '',
        id: 8,
        actors:[],
        url: 'assets/images/netflix-names/220px-Shaft_(2019)_film_poster.png',
        producer: '',
        releaseDate: new Date('15/8/2018')
      }
    ]
    }

    import { Injectable } from '@angular/core';
    import { IMovie } from '../../welcome/welcome-page/movies-model';
    import { Observable, of } from 'rxjs';
    import {filter} from 'rxjs/operators'
    import { MovieService } from '../../welcome/welcome-page/movie-service';

    @Injectable({
      providedIn: 'root'
    })
    export class FavMusicService {
      favMovies: IMovie[] = [];
      constructor(private allMovies: MovieService) { }



      addFavMovie(id:number): IMovie[] {
        this.favMovies = this.allMovies.Movies1.filter(x=> x.id == id)
        return this.favMovies.filter(x => x.id == id)
      }
    }

Проблема в том, что когда я пытаюсь добавитьFavMovie, компилятор жалуется, что в IMovie не существует идентификатора свойства []. но собственность тут как тут. пожалуйста, что я делаю не так.

Я действительно не знаю, что делать с этой строкой, может быть, Observables не был полностью дополнен

    //This produces error
 addFavMovie(id: number): Observable<IMovie[]> {
    return of(this.allMovies.Movies2).pipe(
      filter(x => x.id == id)
  }

 //This code produces no Error
addFavMovie(id:number): IMovie[] {
    this.favMovies = this.allMovies.Movies1.filter(x=> x.id == id)
    return this.favMovies.filter(x => x.id == id)
  }

Answer 1

Я не совсем уверен, куда вы пытались пойти с этим кодом ... но я скопировал его в Stackblitz, чтобы лучше увидеть, что происходит.

Вы можете найти его здесь: https://stackblitz.com/edit/angular-filteringarrays-deborahk

Во-первых, теперь, когда код стоит, нет необходимости использовать Observable. Готовились ли вы перейти от жестко запрограммированного массива к запросу http?

Как уже говорили другие, с кодом было несколько проблем. FavMovieService может быть таким простым:

export class FavMovieService {
  favMovies: IMovie[] = [];

  constructor(private allMovies: MovieService) {}

  addFavMovie(id: number): IMovie[] {
    return this.allMovies.Movies1.filter(x => x.id === id);
  }
}

Предполагается, что вам не нужны Observables.

Надеюсь, это поможет.

Answer 2

 addFavMovie(title: string): Observable<IMovie[]> {
    return of(this.allMovies.Movies2).pipe(
      filter(x => x.id == id) //id will give you an error. You are not declaring anywhere, seems like you meant to use id instead of title.
    ); //You forgot to close the .pipe()
 }

Я думаю, вы имели в виду это:

 addFavMovie(id:number): Observable<IMovie[]> {
    return of(this.allMovies.Movies2).pipe(
      filter(x => x.id == id)
    );
 }

Answer 3

У вас есть несколько ошибок в вашем методе, первый идентификатор не определен, откуда он пришел? И ваш метод не был близок, некоторые скобки отсутствовали.

addFavMovie(title: string): Observable<IMovie[]> {
        return of(this.allMovies.Movies2).pipe(
            filter(x => x.id === id));
}

Идентификатор должен существовать в 'x.id == id '. Возможно, вы хотели использовать title вместо этого. Итак, ваша функция должна быть:

addFavMovie(title: string): Observable<IMovie[]> {
            return of(this.allMovies.Movies2).pipe(
                filter(x => x.id === title));
}

Заголовок - это параметр вашего метода. Но я думаю, вы должны запросить свои фильмы по этому поводу filter(x => x.title === title)