如何将异步数据作为对象数组传递给子组件-angular 6
我试图将从服务器获取的对象数组传递给子组件,但我无法理解为什么它不起作用。 我错过了什么 父组件TS如何将异步数据作为对象数组传递给子组件-angular 6,angular,typescript,Angular,Typescript,我试图将从服务器获取的对象数组传递给子组件,但我无法理解为什么它不起作用。 我错过了什么 父组件TS private movieListSub: Subscription; private movies: UserMovie[] = []; constructor( private movieService: UserMovieService) { } ngOnInit() { this.movieListSub = this.movieService.getUpda
private movieListSub: Subscription;
private movies: UserMovie[] = [];
constructor( private movieService: UserMovieService) { }
ngOnInit() {
this.movieListSub = this.movieService.getUpdatedMovieList().subscribe(response => {
this.movies = response.userMovieList;
})
}
父组件Html
<ng-container *ngIf="movies">
<app-slider [data]="movies"></app-slider>
</ng-container>
服务
private userMovieList: UserMovie[] = []
private updatedUserMovieList = new Subject<{ userMovieList: UserMovie[]}>();
constructor (private http: HttpClient) {}
getAllMovies() {
return this.http.get<{movies:UserMovie[]}>(this.movieApiUrl)
.subscribe(response => {
this.userMovieList = response.movies,
this.updatedUserMovieList.next({userMovieList: this.userMovieList})
})
}
private userMovieList:UserMovie[]=[]
private updateUserMovieList=新主题();
构造函数(私有http:HttpClient){}
getAllMovies(){
返回this.http.get(this.movieapirl)
.订阅(响应=>{
this.userMovieList=response.movies,
this.updateUserMovieList.next({userMovieList:this.userMovieList})
})
}
电影
是私有的,因此子组件无法访问,并且在生成产品时也会抛出错误
请尝试以下方法:
movies$: Observable < UserMovie[] > ;
constructor(private movieService: UserMovieService) {}
ngOnInit() {
this.movies$ = this.movieService.getUpdatedMovieList();
}
谢谢你的帮助。我试着按照你的建议去做,但这给了我一个错误,我可以用服务的响应分配
电影$
。我添加了服务方法OK。现在一切都保持原样,但将电影
从私有更改为公共,并将其登录到ngOnChanges
,我看到了数据。这是正确的工作流程吗?是的。它是。我只是建议了一种方法,这样你就不必手动取消订阅了。
movies$: Observable < UserMovie[] > ;
constructor(private movieService: UserMovieService) {}
ngOnInit() {
this.movies$ = this.movieService.getUpdatedMovieList();
}
<ng-container>
<app-slider [data]="(movies$ | async)?.userMovieList"></app-slider>
</ng-container>
export class SliderComponent implements OnChanges {
@Input() data: UserMovie[];
private movies: UserMovie[];
ngOnChanges() {
console.log(this.data);
}