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

我认为您的问题是最后一个<hr>上的<someTag>标记，将其删除即可。我正在寻找一个原因，不知道这是否是angualar2 +错误。

我遇到了同样的问题，我通过使用CSS的div解决了这个问题。

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

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

3 个答案: