角度5:我如何等待服务完成然后继续下一个任务？

Question

我在angular5应用程序中有一个名为的组件product-list.component.ts.在这个组件中,我有一个构造函数,它调用REST API.我已将此代码放在构造函数中,因为构造函数首先被加载.

product.service.ts

getAllProductsFromACategory(categoryName: string): any {
this.http.get('http://localhost:8080/VespaWebshopAPI
/api/Article/Category?categoryName=' + categoryName).
subscribe(data => {
var article: Article = {
    id: data[0].id,
    name: data[0].name,
    articleNr: data[0].articleNr,
    stock: data[0].stock,
    price: data[0].price,
    description: data[0].description
  };

  return article;
}); 

产品list.component.ts

public article: Article;

constructor(private route: ActivatedRoute, 
private productService: productService) { 
 //Call rest api
 this.article = 
 this.productService.getAllProductsFromACategory('Bremsen');
}

article.ts

export interface Article {
id : number;
name : string;
articleNr : string;
stock : number;
price : number;
description : string;
}

在我的HTML中,我想显示文章的一些属性.因此,如果我尝试在product-list.component.html文件中运行此代码,则会出现以下错误:

{{ article.id }}

错误

ProductListComponent.html:1 ERROR TypeError:无法 在checkAndUpdateView(核心
)
的Object.debugUpdateRenderer [as updateRenderer](core.js:14727)的Object.eval [as updateRenderer](ProductListComponent.html:1)中读取undefined的属性'id'
.js:13841)
在callViewAction(core.js:
14187)
的execComponentViewsAction(core.js:14119)
,在checkAndUpdateView(core.js:13842),在callViewAction(core.js:14187),
在execEmbeddedViewsAction(core.js:14145)
在checkAndUpdateView(core.js:13837)
的callViewAction(core.js:14187)

REST API有效; 我测试了它.我想在html页面显示之前,只有首先加载数据的问题.我读到的其他地方ngFor,我应该使用| 异步管道,但这对我不起作用.

那么我该如何解决这个问题呢？

Answer 1

@TNII,@ Hoang Duc,试着说你是一般的服务暴露Observables.订阅Observable时,它位于组件的ngOnInit中.

//Simple return a get
getAllProductsFromACategory(categoryName: string): any {
   return this.http.get('http://localhost:8080/VespaWebshopAPI
   /api/Article/Category?categoryName=' + categoryName)
}

在组件中,通常在我们订阅时的ngOnInit中

ngOnInit()
{
    productService.getAllProductsFromACategory('Bremsen').
      subscribe(data => {
         if (data[0])
             this.article=data[0];
      })
}

在html中写的{{article？.id}}是一种简单的说法:如果定义了this.article,请告诉我this.article.id.

检查是否在导航器中写入http:// localhost:8080/VespaWebshopAPI / api/Article/Category？categoryName ='Bremsen',给你一系列文章.检查数组的元素是否具有属性id,name等(或返回带有其他属性的元素)

Answer 2

在productService.getAllProductsFromACategory()替换subscribe用map，使该方法返回Observable<Article>

在constructor中product-list.component.ts，订阅Observable<Article>返回从productService与设定值this.article在

this.productService.getAllProductsFromACategory('Bremsen')
    .subscribe((art: Article) => {
        this.article = art;
    },
    (err: any) => console.error(err));

在您的html中，*ngIf="article"在插值的周围元素中放置一个，{{ article.id }}以防止在article获得有效值之前对其进行处理。