ng-container、ng-template之解决ngFor与ngIf同一标签内报错问题

最新推荐文章于 2023-05-31 11:45:16 发布

原创

最新推荐文章于 2023-05-31 11:45:16 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#angular #ng-container #ng-template #ngFor

当在Angular项目中需要同时使用ngFor和ngIf时，直接放置在同一标签会导致错误。ng-container和ng-template提供了解决方案。ng-container作为一个逻辑容器，不会在DOM树中显示，用于减少嵌套。ng-template则是一个不会直接显示的元素，其内容需要经过处理才能渲染。在ng-template中加入ngIf指令，可以理解其为一个Angular元素，被替换为注释节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中的特殊场景，需要同时使用ngFor和ngIf，如果同时放在一个标签内会报如下错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't have multiple template bindings on one element. 
Use only one attribute prefixed with * ("ange)="setFont($event.target.value);">

此时ng-container和ng-template上场，介绍下该嘉宾的功能，即：“不存在”的功能。瓦特？没有代码的解释都是耍流氓，代码走起：

<ng-container>
     <p> hello, I want some 靠海别墅s（低调，低调）</p>
</ng-container>

chrome中运行后查看代码
在这里插入图片描述
本人：“二营长,你TN的 ng-container 呢 ?”
ng-container一脸鄙视: “ 我存在的意义就是不存在！”
“哦？来秀一秀”

<ng-container *ngFor="let item of cornerInfosLeftTop">
    <span class=""  *ngIf="model.tag == 'transverse'">
        {
  
  {item.infoName}}:
    </span>
    <br>
</ng-container>

输出结果：