[英]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>
When I use this code inside my main component's html file, I get the following error:当我在主组件的 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
but when I make a new component :但是当我制作一个新组件时:
@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;
}
and use the above new component inside the main component's file,并在主组件的文件中使用上述新组件,
<someTag data_value="somevalue" class="card">
<some-list [data]="tempData"></some-list>
</someTag>
It works without error.它可以正常工作。
Question:- What could be the possible reason for this?问题:- 这可能是什么原因?
Yes :-是的 :-
I checked end tags.我检查了结束标签。
I counted end tags.我数了结束标签。
I don't have any unclosed tags since the new component is just a copy paste of this loop code.我没有任何未关闭的标签,因为新组件只是此循环代码的复制粘贴。
You are having an opening div
tag modify it to closing </div>
你有一个开始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>
I think your problem is <hr>
tag on last <someTag>
, remove it and it will works.我认为您的问题是最后一个<someTag>
上的<hr>
标签,将其删除即可。 I'm looking for a reason about it, I don't know if it is a angualar2+ bug.我正在寻找有关它的原因,我不知道它是否是 angualar2+ 错误。
I have had the same problem and I resolved it with a div with css.我遇到了同样的问题,我用带有 css 的 div 解决了它。
<someTag data_value="somevalue"><div class="horizontal_line"></div></someTag>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.