在 Angular 中的 Firebase 上保存和获取不起作用

Question

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

它只是保存和获取写入movie.service.ts文件中的数据。此外，获取的数据不会在电影组件上呈现。

数据存储.服务

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);
        }
      );
  }
}

电影服务网 ：

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());
    }
}

电影.模型.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;
    }
  }
  

电影组件：

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请求的问题在于您使用的网址需要json但您正在发送Movie对象。 您应该向此 URL 发送和接收json。

希望它有帮助...