时间戳

首页 > 解决方案 > Angular - 子组件不呈现来自 http 请求的数据更新

angular - Angular - 子组件不呈现来自 http 请求的数据更新

问题描述

我在 app.component.html 中有这个组件结构：

  <sidebar-container></sidebar-container>
  <router-outlet></router-outlet>

侧边栏容器是属于另一个模块（sidebar.module）的组件。在 sidebarContainer 组件的 ngOnInit 中，我有一个名为“list”的属性，它作为一个空数组启动。

export class SidebarContainer implements OnInit {

  list: Array<any> = [];
  
  constructor(
   private http: HttpClient,
  ) {}

  ngOnInit():void {
  this.http.get('url').subscribe(
   res => this.list = res
  }

该列表具有以下结构：

 [{id: 1, name: "Michael"}]

在侧边栏容器子组件中，我只有这个模板（侧边栏是一个组件，它只有一个 div 用于呈现作为输入传递的列表）：

<sidebar [list]="list"></sidebar>

侧边栏组件模板：

<div *ngFor="let l of list">{{l.id}}</div>

现在，当我启动应用程序并尝试调试数据时，数据没有更新，我什么也看不到。Http 请求在组件刚刚加载并且 ngfor 似乎不起作用时开始。但是当我在侧边栏组件模板中初始化数组的值时，如下所示：

test -> {{list[0].id}}
<div *ngFor="let l of list">{{l.id}}</div>

我可以看到这两个值。

我无法理解这种情况。我究竟做错了什么？

标签： angulartypescript

解决方案

在您的模板中，如果 id 已定义，请放置检查条件。

<div *ngFor="let l of list">{{l.hasOwnProperty('id')?l.id:''}}</div>

推荐阅读