Question

我在启动过程中通过调用ngOnInit中的subscription方法来调用电影数据服务。我调试了一下，发现this.movies数组已成功填充。但是，模板中的ngFor不显示任何数据。您能帮我理解问题是什么吗？可能是从ngOnInit打电话的一个坏主意？

now-running.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>

Answer 1

正如注释中已经指出的那样，您的代码存在的问题是您没有在ngFor前面加上星号，因此它不需要*ngFor。从OnInit调用服务没有问题。

我还从您的代码中创建了一个StackBlitz sample来证明其有效。

ngOnInit期间来自服务器的角负载数据不起作用

1 个答案: