Блог

Я вызываю службу передачи данных о фильмах во время запуска, вызывая метод subscribe в ngOnInit. Я отладил и вижу, что массив this.movies успешно заполняется. Однако ngFor в шаблоне не отображает никаких данных. Не могли бы вы помочь мне понять, в чем проблема? может быть, вызов из ngOnInit — плохая идея?

теперь запущен.component.ts

 @Component({
  selector: 'app-now-running',
  templateUrl: './now-running.component.html',
  styleUrls: ['./now-running.component.css']
})
export class NowRunningComponent implements OnInit {

  constructor(private nowrunningService: NowRunningServiceService) { }
  movies: Array<Movie>=[];
  ngOnInit() {
    console.log("MOvies length"  this.movies);
    this.nowrunningService.getNowRunningMovies().subscribe((data:any) => {
      // this.movies= data.results;

      data.results.forEach(element => {
        this.movies.push(new Movie(element.title))
      });
      console.log(this.movies);
      console.log("MOvies length"  this.movies.length)

    });

  }

}
  

now-running.component.html

 <table>
  <tr ngFor="let movie of movies; let i =index;">
    <td>{{i}}</td>
    <td>{{movie| json}}</td>
  </tr>
</table>
  

app.component.html

 <app-now-running></app-now-running>
  

ОБНОВЛЕНИЕ (РЕШЕНИЕ):

в директиве ngFor отсутствовала звездочка.

       <tr ngFor="let movie of movies; let i =index;">
        <td>{{i}}</td>
        <td>{{movie| json}}</td>
      </tr>
  

Как уже указывалось в комментариях, проблема с вашим кодом заключается в том, что вы не поставили перед ngFor звездочкой, которую ему нужно добавить *ngFor . При вызове служб из OnInit проблем нет.

Я также создал образец StackBlitz из вашего кода, который демонстрирует, что это работает.