[英]Angular Template parse errors when add ul inside p tag
我正在開發演示項目,如果我不在 P 標簽內添加 UL 標簽,則可以正常工作。
工作代碼:
<p>
<br/> Umesh test help <br/>
</p>
<ul>
<li *ngFor="let user of help2Listdata">
<a routerLink="/details/{{user.hid}}">{{ user.hid }}</a>
<ul>
<li><a href="http://{{ user.name }}">{{ user.name }}</a></li>
<li>{{ user.ans }}</li>
</ul>
</li>
</ul>
非工作代碼:
<p>
<br/> Umesh test help <br/>
<ul>
<li *ngFor="let user of help2Listdata">
<a routerLink="/details/{{user.hid}}">{{ user.hid }}</a>
<ul>
<li><a href="http://{{ user.name }}">{{ user.name }}</a></li>
<li>{{ user.ans }}</li>
</ul>
</li>
</ul>
</p>
錯誤跟蹤:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
</li>
</ul>
[ERROR ->]</p>"): ng:///Help2Module/Help2Component.html@13:0
Error: Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
</li>
</ul>
[ERROR ->]</p>"): ng:///Help2Module/Help2Component.html@13:0
at syntaxError (compiler.js:486)
at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
at compiler.js:3202
at Object.then (compiler.js:475)
at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:3202)
at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14914)
at compiler.js:34420
at Array.forEach (<anonymous>)
at compiler.js:34419
at syntaxError (compiler.js:486)
at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
at compiler.js:3202
at Object.then (compiler.js:475)
at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:3202)
at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14914)
at compiler.js:34420
at Array.forEach (<anonymous>)
at compiler.js:34419
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4751)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
請讓我幫助理解為什么會遇到這個問題。 當我在檢查模式下看到工作代碼輸出時,它似乎很好,但是當更改標簽樹結構時,它會在瀏覽器控制台中拋出上述錯誤。
實際上,根據 w3c 規范,在 p 標簽內不允許使用 ul 標簽。 這將失敗。 嘗試使用其他標簽,例如 div 或 ng-content。
編輯:根據W3C 規范,p 標簽可以包含“短語元素”,這只能在以下標簽中:
a
em
strong
small
i
b
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.