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

83 阅读 0 评论 55 点赞

我是靠谱客的博主热情唇彩，最近开发中收集的这篇文章主要介绍ng-container、ng-template之解决*ngFor与*ngIf同一标签内报错问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

项目中的特殊场景，需要同时使用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>

输出结果：
在这里插入图片描述
总结一下，ng-container可以在实现ngIf、ngFor的基础之上减少层级嵌套，特别是ngIf和ngFor需要在同一个地方使用的时候。

不早了，ng-template功能明天再介绍

hi，继续说下ng-template，先上代码

    <ng-template>
        <p> 以太 100，别墅靠海 </p>
    </ng-template>
    
    <ng-container>
        <p> EOS 3000，别墅靠山 </p>
    </ng-container>

看看输出结果以及浏览器调试中的html代码
渲染结果

我的靠海别墅咋没了？难道ng-template连里面的内容都隐藏掉了。接下来在上面的模板中添加 ngIf 指令试试：

    <ng-template [ngIf]="true">
        <p> 以太 100，别墅靠海 </p>
    </ng-template>
    
    <ng-container>
        <p> EOS 3000，别墅靠山 </p>
    </ng-container>

在这里插入图片描述

原来<ng-template>是一个 Angular 元素，它永远不会直接显示出来。在渲染视图之前，Angular 会把<ng-template>及其内容替换为一个注释。<ng-template>模板元素与html5的template元素一样，需要经过特殊处理后才能渲染。聪明的小伙伴可能发现使用*ngIf语法糖，ng-template也是没法显示的，想更深入了解的小伙伴可以读读ngIf的源码，也许能找到答案。