javascript - 以角度保存和获取firebase不起作用
问题描述
为什么我的电影组件在获取数据后没有更新。如果我添加了新电影或对现有电影进行了更改,也不会保存数据。
它只是保存和获取写入 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);
}
);
}
}
电影服务.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());
}
}
电影.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;
}
}
电影组件:
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();
}
}
我能做些什么来保存和获取将在页面上呈现的数据。
解决方案
我认为您的PUT
请求的问题是您使用的网址是预期的json
,但您正在发送Movie
对象。你应该发送和接收json
到这个 url。
希望它有帮助...
推荐阅读
- java - 如何在firebase中将旧数据与新数据相加
- flutter - 如何获取 json 数据并根据参数将其分离?
- jupyter-notebook - 在我的集群节点上启动 Jupyter notebook(高性能计算或 HPC 设施)
- javascript - 如何在 Nodejs 中访问导出的“嵌套”函数 - TypeError:不是函数
- javascript - 如何使用 JavaScript 从 UI 向直线聊天机器人发送消息
- python-3.x - 如何使用 jaydebeapi 调用存储过程 oracledb 并传入和传出 4 个参数
- node.js - 我如何获得标头 REST API 的响应大小
- postgresql - 如何使用 TSVECTOR 和 TSQUERY 搜索单个或多个列
- java - 集成 Google Pay API 后我该怎么办?
- asp.net - 获取 SQL Server 级别的应用程序信息以进行审核