угловой р-элемент как корневой элемент внутри шаблона

Question

Я пытаюсь следовать вводному уроку Angular "Tour Of Heroes". В разделе " Показать объект героя " вы должны изменить содержимое шаблона 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>

Проблема заключается в том, что, хотя вышеприведенный код работал, когда герой был простым объектом 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, которую я игнорировал. Все прошло так:

Uncaught Error: Ошибки разбора шаблона: Неожиданный закрывающий тег «p». Это может произойти, когда тег уже закрыт другим тегом. Для получения дополнительной информации см https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

Поиск ТО Я обнаружил, что Angular, и фактически вся спецификация HTML не любит P-тег с дочерними элементами, которые не являются текстовыми - насколько я понимаю, это тег, который следует использовать для немедленного форматирования, например B, а не для построения структуры или макета. Здесь широко обсуждается этот вопрос здесь .