如何在Angular2中的子组件上的模板中显示嵌套对象值？

Question

我一直遇到一个问题 - 我从我的服务类获取JSON，我能够写入控制台的整个对象，我能够显示根级别值，但是对于嵌套值，我得到`<app-item *ngFor="let item of items; let i = index" [item]="item[itemId]="i"></app-item> ` 或根本没有;取决于各种方法。

我试图在StackOverflow上找到解决方案，他们似乎都指向使用管道。这也是你在我的案例中提出的建议吗？

这是我的代码：

在父组件中，我只是将对象传递给child：

@Input() item: Item;

在我有的儿童班上

<a [routerLink]="[itemId]" class="list-group-item clearfix" routerLinkActive="active">
    <div class="pull-left" (click)="stateInfo()">
        <h4 class="list-group-item-heading">{{ item.name }}</h4>
        <p class="list-group-item-text">Item code : {{ item.code }}</p>
        <p class="list-group-item-text">Item tag : {{ item?.tags }}</p>
    </div>
</a>

最后在一个子html模板上，我有以下结构：

{{ item?.tags[i].name }}

我还试图延伸Object: code: "001" name: "Kitchen" tags: Array[2] 0: Object name: "tag1" value: "32" 1: Object name: "tag2" value: "44" ... 以及我能想到的其他各种方式，但似乎没有一种方法可行。

标签实体是可选的，因此＆＃39;？＆＃39;在一条路上。

我还附加了click事件监听器，所以我可以使用console.log（this.item）。这就是我在控制台中得到的结果：

{{1}}

据我所知，您的服务是您的数据库和视图之间的中间层。您在组件中注入服务，然后调用服务中的方法（来自您的组件）。您的服务负责获取数据（使用http）并将其映射到json。您的组件正在订阅响应，将json转换为数组，并通过插值显示给视图。对？

Answer 1

标签是一个数组，因此您需要迭代该数组并显示它们。

首先，让我们修复父模板中的错误：

[item]="item[itemId]="i"

错了。正如您在模板中看到的那样，您正在迭代let item of items ...所以在同一行上您只需传递当前item，所以只需传递该单个（当前）项：

[item]="item"

然后迭代标签。如上所述，它是一个数组，因此您只需像处理项目一样遍历它：

<p *ngFor="let tag of item.tags">{{tag.name}}</p>

那应该有用！ :)这是一个Plunker

作为旁注，您是否有特殊原因要遍历这些项并将它们分配给新数组然后再返回items数组？为什么不简单地做：

.subscribe(data => {
  this.items = data;
})