javascript - 意外的结束标签 | Angular 2.5 |自定义标签

Question

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

它工作没有错误。

Question:- What could be the possible reason for this?

是的:-
我检查了结束标签。
我数了结束标签。
我没有任何未关闭的标签，因为新组件只是此循环代码的复制粘贴。

Answer 1

您有空缺 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>