意料之外的结束标记\\ angular2.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>

它的工作没有错误。

问：-可能的原因是什么？

是:-

我查过结束标签了。

我数了数尾签。

我没有任何未关闭的标签，因为新组件只是这个循环代码的复制粘贴。

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>

Answer 2

<someTag data_value="somevalue" class="card">
   <some-list [data]="tempData">
   </some-list> -------------------add closing tag
</someTag>

Answer 3

我认为您的问题是在最后一个<someTag>上的<someTag>标记，删除它，它将工作。我在找一个原因，我不知道它是否是一个angualar2+错误。

我也遇到过同样的问题，我用css的div解决了它。

<someTag data_value="somevalue"><div class="horizontal_line"></div></someTag>