Question

我正在尝试遵循Angular的入门教程“ Tour Of Heroes”。在“ Show The Hero Object”部分中，应该从

更改heroes.component.html模板的内容。

{{hero}}

到

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

上面的代码对我有用，但是最初我做了些许改动，模板内容被段落HTML元素

包围，如下所示：

<p>{{hero}}</p>

问题是，尽管上面的方法正常工作，但是当hero是一个简单的String对象时，将模板更改为以下内容不会产生任何输出。即检查源代码，我只是看到空的app-root元素。

<p>
    <h2>{{hero.name}} Details</h2>
    <div><span>id: </span>{{hero.id}}</div>
    <div><span>name: </span>{{hero.name}}</div>
</p>

可能是什么问题？ UM，最后我发现了错误，但可以公开评论。谢谢。

Answer 1

UM，好的，我只是将其发布并保留以备将来参考。与Angular无关。从来没有意识到我没有被允许这样做。

我忽略的javascript控制台中有一个错误。它是这样的：

未捕获的错误：模板解析错误：意外的结束标签“ p”。当标签已经被另一个标签关闭时，可能会发生这种情况。有关更多信息，请参见https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

搜索我发现是Angular的，实际上整个HTML规范不喜欢带有非文本子元素的P标签-据我了解，它是一种应用于立即格式化的标签，例如B，而不是用于构建结构或布局。关于此问题here，有广泛的讨论。