Question

我的目标是在组件渲染时加载下拉列表。我有一个服务，它会命中网址并获取json数据。像这样

 @Injectable()
 export class StudentListService {

 constructor(private http: HttpClient) {}

 studentListUrl: string ="http://www.somecollege.com/students";

 public getStudentList() {
    return this.http.get(this.studentListUrl);
}

我有一个组件（StudentListComponent），它将在下拉列表中显示从服务中获得的学生姓名。

 export class StudentListComponent implements OnInit {
    items: any = [];

    constructor(private studentListService: StudentListService){}

    ngOnInit() {
       this.items = this.studentListService.getStudent().subscribe(
           data => {this.items = data},
           err => console.error(err),
           () => console.log('Done Loading Student Data'));

       //////////  Here this.items is undefined 

    }

但是，如果我在StudentListComponent html上放置一个按钮并使用其click事件显示this.items，则会看到数据

 buttonClicked() {
  console.log(this.items); /// see the students in console)
 }

为什么在ngOnInit（）中未定义this.items？如何在渲染组件时填充数据？

Answer 1

正如阿米特（Amit）所述，由于这是一个异步调用，因此在subscribe块运行之前，您的数据将不可用。这样您将无法访问超出其范围的数据

阅读下面的代码中的注释以了解：

export class StudentListComponent implements OnInit {
  items: any = [];

  constructor(private studentListService: StudentListService) {}

  ngOnInit() {
    this.studentListService.getStudent().subscribe(
      data => {
        this.items = data;
        //////////  Here this.items WILL BE DEFINED
      },
      err => console.error(err),
      () => console.log('Done Loading Student Data'));

    //////////  Here this.items WILL BE undefined as this will run synchronously i.e. it won't wait for this.studentListService.getStudent() to run.

  }

}

Answer 2

ngOnInit() {
       setTimeout(()=>
          {
            this.studentListService.getStudent().subscribe(response =>{
             this.items = response;
          },error=>{
           console.log(error);
         });
     },1000);
 }

Answer 3

服务的getStudentList方法返回一个Observable，因此它是一个async函数。因此，data => {this.items = data}行仅在订阅完成后才执行。但是this.items并不是 undefined ，因为您为items: any = []分配了一个空数组，所以它只是 empty 。

您可以使用buttonClicked方法记录值，因为您的http请求已完成。

我认为您需要从Observable更熟悉RxJS。

以下是HttpClient的官方文档：https://angular.io/guide/http

Answer 4

删除此分配this.items = this.studentListService.getStudent()...。您正在尝试将Subscription对象分配给this.items。

ngOnInit() {
       this.studentListService.getStudent().subscribe(
           data => {this.items = data},
           err => console.error(err),
           () => console.log('Done Loading Student Data'));

}

注意：您只能在http（异步）调用完成后才能访问它。完成后，您的下拉菜单应会自动加载这些项目。如果您尝试将其打印在subscribe块之外，则会使您不确定。

无法在ngOnInit中加载数据

4 个答案: