项目中的特殊场景，需要同时使用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的源码，也许能找到答案。

【总结一下】

ng-container：是一个逻辑容器，他存在的意义是不存在，不作为 DOM 树中的节点，但可以被渲染为 HTML中的 comment 元素，在实现功能的基础上避免添加额外的元素。

ng-template 的实现原理是通过 * 语法糖的结构指令，最终都会转换为 或 模板指令，模板内的内容如果不进行处理，是无法在页面中渲染出来的。

来自  https://blog.csdn.net/lilele0227/article/details/86617116