Question

我尝试将从服务器获取的对象数组传递给子组件，但是我不明白为什么它不起作用。我在这里想念什么？

父组件TS

  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>

子组件ts

export class SliderComponent implements OnInit {

  @Input() data:UserMovie[];
  private movies:UserMovie[];

  ngAfterViewInit() {
    console.log(this.data)  // Empty Array
  }

服务

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

Answer 1

movies是私有的，因此子组件将无法访问它，并且在Prod Build的情况下也会引发错误。

尝试以下方法：

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>

这样，您将不必担心取消订阅可观察对象。

此外，您将在input中获得ngOnChanges属性，而不是ngAfterViewInit

export class SliderComponent implements OnChanges {

  @Input() data: UserMovie[];
  private movies: UserMovie[];

  ngOnChanges() {
    console.log(this.data);
  }

如何将异步数据作为对象数组传递给子组件-angular 6

1 个答案: