javascript - 意外的结束标签| angular2.5 |自定义标签

<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>