Почему массив не обновляется после подписки на услугу?

Question

Я пытаюсь получить список фильмов с сервера Web Api, который работает на моем локальном хосте. Сервер возвращает данные, когда я вызываю их с помощью запроса Get с помощью модуля HttpClient, но я не могу отобразить данные.

Компонент MovieList

import { Component, OnInit } from '@angular/core';
import { MovieService } from '../services/movie.service';
import { IMovie } from '../Interfaces/IMovie';

@Component({
  selector: 'app-movielist',
  templateUrl: './movielist.component.html',
  styleUrls: ['./movielist.component.css'],
  providers: [MovieService]
})
export class MovielistComponent implements OnInit {
  private _movieService: MovieService;
  movies: IMovie[] = [];
  movie: IMovie;

  constructor(movieService: MovieService) {
    this._movieService = movieService;
  }

  ngOnInit(): void {
    this.getMovies();
  }
  getMovies(): void {
    this._movieService.getMovies().subscribe(movies => {
                                                        this.movies = movies;
                                                        return movies;
                                                        })
  }

}

Компонент MovieService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IMovie } from '../Interfaces/IMovie';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class MovieService {
  private _movieUrl = 'http://localhost:50898/api/movie';
  private _http: HttpClient;

  constructor(http: HttpClient) {
    this._http = http;
  }

  getMovies(): Observable<IMovie[]> {
    return this._http.get<IMovie[]>(this._movieUrl);
  }

}

Если я посмотрю на вкладку Сеть инструментов разработчика Chrome, то увижу, что сервер отвечает следующим образом:

[{"MovieID":1,"Name":"shining","Details":"details","MeetingDate":null},{"MovieID":2,"Name":"one flew over cuckoo","Details":"details","MeetingDate":"2018-05-07T00:00:00"},{"MovieID":3,"Name":"up","Details":"animaation","MeetingDate":"2018-05-07T00:00:00"}]

MovieListComponent HTML.Template

<p>
  movielist works!
</p>

<div *ngIf="movies">
    <ul>
      <li *ngFor="let movie of movies">
        <span>{{movies.MovieID}}</span>
      </li>
    </ul>
</div>
<button>
</button>

Интерфейс IMovie:

export interface IMovie {
  MovieID: number;
  Name: string;
  Details: string;
  MeetingDate: Date;
}

Вот база данных MSSQL:

Answer 1

Забота о опечатке.

<div *ngIf="movies">
    <ul>
      <li *ngFor="let movie of movies">
        <span>{{ movie.MovieID }}</span>
      </li>
    </ul>
</div>

В вашем компоненте MovieList вы можете избавиться от этого оператора возврата:

getMovies(): void {
    this._movieService.getMovies()
        .subscribe(movies => {
            this.movies = movies;
        });
}