Question

我正在开发一个场景，我必须使用rest调用从springboot中检索对象列表，并使用angular 5将它们填充到UI中。

我的组件看起来像这样，

export class BusinessComponent implements OnInit {

  serviceSavings:Services[] = [];

  constructor(private ServicesService:ServicesService) {
  }

  ngOnInit() {
    this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID)
      .subscribe(serviceSavings => this.serviceSavings = serviceSavings);

    console.log("The length of serviceSavings :", this.serviceSavings.length); //this always prints zero.
  }

  examplemethod() {
    console.log("The length of serviceSavings :", this.serviceSavings.length);
  }
}

现在问题是init（）方法中的日志语句打印了0行服务。我需要从列表中检索每个服务并对其执行一些操作。

当我放入用户定义的方法（例如在UI中使用用户操作调用它）时的相同日志。它会在数据库表中显示列表的确切计数数。

我需要在应用程序加载期间在init（）中编写一些业务逻辑，以在UI中显示某些值。

但是在应用程序加载时，init（）中重试列表的长度始终为0。我无法迭代价值观。我认为arrayobject存在一些更新问题。

我的服务方法如下所示，

  getServicesByCatID(categoryid){
    return this.http.get(this.getServiceUrlByCategory(categoryid))
      .map(res => res.json());
  }

springboot应用程序完全返回对象列表后端没有问题。

有人可以帮我找出问题吗？

Answer 1

将您的控制台移到subscribe()

中

ngOnInit(){

this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID) 
.subscribe(serviceSavings => {this.serviceSavings = serviceSavings

  console.log("The length of serviceSavings :", this.serviceSavings.length)

  });

}

Answer 2

您正在尝试在订阅完成之前获得结果，将其移至订阅内;如果要在视图中获取此数据，可以使用异步管道：

export class BusinessComponent implements OnInit {
 serviceSavings : Observable<Services[]>;

constructor(private ServicesService: ServicesService){}

ngOnInit(){
 this.serviceSavings = 
  this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID); 
}

您可以在视图中迭代您的数据：

<p *ngFor='let service of serviceSavings | async'></p>

Answer 3

我有同样的问题，我得出结论，One应该写这个

 this.ServicesService.getServicesByCatID(PRODUCTSAVINGSID)
 .subscribe(serviceSavings => this.serviceSavings = [...serviceSavings]);

而不是this.serviceSavings = serviceSavings并且以同样的方式，每次您希望向数组添加元素时，您最好写this.serviceSavings = [...serviceSavings, newServiceSaving]而不是.push(newServiceSaving)

http服务调用

3 个答案: