Angular 2 个简单的 HTTP 获取

Question

我正在努力学习 angular 2，但我无法让最简单的 http 开始工作。

我收到运行时错误

 Cannot read property 'id' of undefined

但同时 'id' 的值显示在页面上，这让我很困惑。怎么会是undefined还显示呢

我从 WebApi

返回了这个 json

{
"category":["some string"],
"icon_url":"some string",
"id":"some string",
"url":"some string",
"value":"some string"
}

我创建了一个界面

export interface IProduct {
category: string;
icon_url: string;
id: string;
url: string;
value: string;
}

在我的服务中，我有调用 webApi 和 returns json

的方法

getproducts(context: ContentAndStructureContext): Observable<IProduct[]> {
return this.http.get(routes.url(context), { cache: true })
  .map((res: Response) => <IProduct[]>res.json())
  .do(data => console.log(data));

}

工作正常，数据对象正在记录到控制台。到目前为止一切顺利

在我的组件中，我调用了 getProducts 方法

export class HomeComponent implements OnInit {
 isProductLoading: boolean;
 iproducts: IProduct[]; 

constructor(private contentAndStructureService: ContentAndStructureService) {}

 ngOnInit() {
this.isLoading = true;
this.isProductLoading = true;    

  this.contentAndStructureService.getproducts({ category: 'dev' })
  .pipe(finalize(() => { this.isProductLoading = false; }))
  .subscribe(iproducts => this.iproducts = iproducts);
 }
}

这是我的HTML。它打印 iproducts.id 的值就好了。

<div class="container">
  <mat-card>     
    <mat-card-content>     
      <mat-card-subtitle>
        <app-loader [isLoading]="isProductLoading" size="1.5"></app-loader>
        <q [hidden]="isProductLoading">{{iproducts.id}}</q>
      </mat-card-subtitle>
    </mat-card-content>
  </mat-card>
</div>

但是在控制台中记录了跟随错误

ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (home.component.html:13)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14377)
at checkAndUpdateView (core.js:13513)
at callViewAction (core.js:13858)
at execComponentViewsAction (core.js:13790)
at checkAndUpdateView (core.js:13514)
at callViewAction (core.js:13858)
at execEmbeddedViewsAction (core.js:13816)
at checkAndUpdateView (core.js:13509)
at callViewAction (core.js:13858)

我不明白 id 是如何被取消定义的，同时值打印得很好......我不知道如何解决它。我在这上面花了无数个小时，希望有人有时间告诉我我在这里做错了什么。

Answer 1

我认为你有两个问题。首先是异步。这是发生的事情的时间表

组件已初始化
构造函数被调用
调用了on init方法
on init方法发送http请求......
on init 完成
视图已初始化，iproducts.id被调用

一段时间后......

http 请求完成，调用订阅回调设置您的 iproducts

因此，当您的视图初始化并且模板为运行时，iproducts 仍然为空，因为您的 http 请求尚未完成。我要么将模板的那部分包装在 if ngIf=“iproducts” 中，要么为 iproducts 提供一个在访问属性时不会导致错误的默认值。

第二个问题是你有一个数组，你试图访问它上面的一个 id.....我想你想使用 ngFor=“let iprod of iproducts” 来迭代数组中的项目然后说 iprod.id.

您仍然需要检查以确保 iproducts 不为空或为其指定默认值 []

Angular 2 个简单的 HTTP 获取

Angular 2 Simple HTTP Get

angular2-services

angular-cli