[英]Unexpected closing tag | angular2.5 | custom tags
<someTag data_value="somevalue" class="card">
<div class="some" *ngFor='let item of tempData'>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.id }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.name }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.status }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.sent }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.views }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.clicks }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.source }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.created }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.report }}</span>
</someTag>
<someTag data_value="somevalue"><hr></someTag>
</div>
</someTag>
当我在主组件的 html 文件中使用此代码时,出现以下错误:
> ERROR Error: Uncaught (in promise): Error: Template parse errors:
> Unexpected closing tag "sometag". 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 ("
> <sometag data_value="somevalue"><hr></sometag>
> </div> [ERROR ->]</sometag>"): ng:///someModule/someComponent.html@65:1
但是当我制作一个新组件时:
@Component({
selector: 'some-list',
styleUrls:['some.component.css'],
template: `
<div class="some" *ngFor='let x of data'>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.id }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.name }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.status }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.sent }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.views }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.clicks }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.source }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.created }}</span>
</sometag>
<sometag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ x.report }}</span>
</sometag>
<sometag data_value="somevalue"><hr></sometag>
</div>
`,
})
export class ListComponent{
@Input() data;
}
并在主组件的文件中使用上述新组件,
<someTag data_value="somevalue" class="card">
<some-list [data]="tempData"></some-list>
</someTag>
它可以正常工作。
问题:- 这可能是什么原因?
是的 :-
我检查了结束标签。
我数了结束标签。
我没有任何未关闭的标签,因为新组件只是此循环代码的复制粘贴。
你有一个开始div
标签修改它关闭</div>
<someTag data_value="somevalue" class="card">
<div class="some" *ngFor='let item of tempData'>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.id }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.name }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.status }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.sent }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.views }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.clicks }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.source }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.created }}</span>
</someTag>
<someTag data_value="somevalue" class="text-align-center">
<span class="fs-6">{{ item.report }}</span>
</someTag>
<someTag data_value="somevalue"><hr></someTag>
</div> ------------------- here
</someTag>
<someTag data_value="somevalue" class="card">
<some-list [data]="tempData">
</some-list> -------------------add closing tag
</someTag>
我认为您的问题是最后一个<someTag>
上的<hr>
标签,将其删除即可。 我正在寻找有关它的原因,我不知道它是否是 angualar2+ 错误。
我遇到了同样的问题,我用带有 css 的 div 解决了它。
<someTag data_value="somevalue"><div class="horizontal_line"></div></someTag>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.