在angular中的firebase上保存和获取不起作用

Question

为什么我的电影组件在获取数据后没有更新。如果我添加了新电影或在现有电影中进行了更改，也不会保存数据。

它只是对写入movie.service.ts文件的数据进行存取。另外，获取的数据不会呈现在电影组件上。

Data-storage.service

import { Injectable } from '@angular/core';
import { MovieService } from '../movies/movies.service';
import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http';
import { Movie } from '../movies/movie.model';
import { Observable} from 'rxjs';
import { map } from 'rxjs/operators';
// import 'rxjs/Rx';
// import 'rxjs/Rx';

@Injectable({
  providedIn: 'root'
})
export class DataStorageService {

  constructor(private httpClient: HttpClient,
    private movieService: MovieService,) { }

  storeMovies(): Observable<any> {
    const req = new HttpRequest('PUT', 'https://moviepedia-4211a.firebaseio.com/movies.json', this.movieService.getMovies(), {reportProgress: true});
    return this.httpClient.request(req);
  }

  getMovies() {
    this.httpClient.get<Movie[]>('https://moviepedia-4211a.firebaseio.com/movies.json', {
      observe: 'body',
      responseType: 'json'
    })
      .pipe(map(
        (movies) => {
          console.log(movies);
          return movies;
        }
      ))
      .subscribe(
        (movies: Movie[]) => {
          this.movieService.setMovies(movies);
        }
      );
  }
}

​

movie.service.ts：

​

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';
import { Movie } from './movie.model';

@Injectable()
export class MovieService {
    moviesChanged = new Subject<Movie[]>();

    private movies: Movie[] = [
        new Movie(
            'Movie test', 'Movie details', 'https://s18672.pcdn.co/wp-content/uploads/2018/01/Movie-300x200.jpg'
        ),
        new Movie(
            'Movie test 2', 'Movie details 2', 'https://s18672.pcdn.co/wp-content/uploads/2018/01/Movie-300x200.jpg'
        ),
        new Movie(
            'Movie test 2', 'Movie details 3', 'https://s18672.pcdn.co/wp-content/uploads/2018/01/Movie-300x200.jpg'
        )
    ];

    constructor(){}

    getMovie(index: number) {
        return this.movies[index];
    }

    getMovies() {
        return this.movies.slice();
    }

    addMovie(movie: Movie) {
        this.movies.push(movie);
        this.moviesChanged.next(this.movies.slice());
    }
    
    updateMovie(index: number, newMovie: Movie) {
        this.movies[index] = newMovie;
        this.moviesChanged.next(this.movies.slice());
    }

    deleteMovie(index: number) {
        this.movies.splice(index, 1);
        this.moviesChanged.next(this.movies.slice());
    }

    setMovies(movies: Movie[]) {
        this.movies = movies;
        this.moviesChanged.next(this.movies.slice());
    }
}

​

movie.model.ts

export class Movie {
    public name: string;
    public description: string;
    public imagePath: string;
  
    constructor(name: string, description: string, imagePath: string) {
      this.name = name;
      this.description = description;
      this.imagePath = imagePath;
    }
  }

​

movie.component：

​

import { Component, OnInit, EventEmitter, Output, OnDestroy } from '@angular/core';
import { Movie } from '../movie.model'
import { MovieService } from '../movies.service';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit, OnDestroy {
  subscription: Subscription;
  
  movies: Movie[] = [];

  constructor(private movieService: MovieService,
    private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.subscription = this.movieService.moviesChanged
    .subscribe(
      (movies: Movie[]) => {
        this.movies = movies;
      }
    );
  this.movies = this.movieService.getMovies();
  }

  onNewMovie() {
    this.router.navigate(['new'], {relativeTo: this.route});
  }

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

​

我可以做什么，保存和获取将在页面上呈现的数据。

Answer 1

我认为您的PUT请求的问题在于您使用的url需要json，但您发送的是Movie对象。您应该向此url发送和接收json。

希望它能帮上忙。