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：无法读取属性       ＆＃39; ID＆＃39;未定义的       at Object.eval [as updateRenderer]（ProductListComponent.html：1）
      at Object.debugUpdateRenderer [as updateRenderer]（core.js：14727）
      在checkAndUpdateView（core.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 =＆＃39; Bremsen＆＃39;，给你一系列的文章。检查数组的元素是否具有属性id，name等（或带有其他属性的return元素）

Answer 2

在productService.getAllProductsFromACategory()中将subscribe替换为map，以便该方法返回Observable<Article>

在constructor的{{1}}中，订阅从product-list.component.ts返回的Observable<Article>并在其中设置productService的值

this.article

在您的html中，在插值this.productService.getAllProductsFromACategory('Bremsen') .subscribe((art: Article) => { this.article = art; }, (err: any) => console.error(err));的周围元素中添加*ngIf="article"，以防止在{{ article.id }}获取有效值之前对其进行处理。

Answer 3

问题是模板正在尝试使用尚不可用的数据。在访问它之前，必须完成服务器的响应。所以，为了等待并避免错误＆＃34;，我做了一个类似的技巧，工作正常。

我在surronding元素上写了一个条件指令。这样做，＆＃34;当 data_from_server 为空＆＃34;时，模板不会尝试获取信息，也不会产生失败。

＆＃13;

<div style="text-align:center" *ngIf="data_from_server">
  <form>
    <label for="name">NAME</label> 
    <input [(ngModel)]="data_from_server.nombre" name="nombre">
  </form>
 </div>

＆＃13;

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

3 个答案: