Question

我正在尝试显示一些作为HTTP Web响应的JSON数据，但它无法正常工作。

以下是我的http请求：

nodes: any;

ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('/assets/TEST.json').subscribe(data => {
        // Read the result field from the JSON response.
        this.nodes=data;
    });
}

这是模板：

<div *ngFor="let node of nodes">
    <p>{{node.description}}</p>
</div>

这是我的json数据：

{
    "id": 1,
    "name": "root1",
    "link": "/login"
}

这是我在控制台中遇到的错误：

无法找到“root1”类型的不同支持对象“[object Object]”，其中root1是与发出请求的组件不同的组件。

Answer 1

首先，您的JSON是一个对象，而不是一个数组。因此，您无法使用ngFor。由于您的对象没有description属性（但name），您可以使用此模板显示名称（确保已设置节点）：

<p *ngIf="nodes">{{ nodes.name }}</p>

Answer 2

我们在评论中的调查解决方案：

*ngFor不应该在那里使用，因为他的JSON是一个对象而不是一个数组

所以解决方案很简单：

<p> id : {{nodes.id}}</p>
<p> name : {{nodes.name}}</p>
<p> link : {{nodes.link}}</p>

如何在角度模板中显示json web响应？

2 个答案: