首页 > 建站教程 > 前端框架 >  angular 模板循环ng-container正文

angular 模板循环ng-container

angular2 在组件模板中可以循环数组集合等对象,语法非常简单,如:

<ng-container *ngFor="let item of model.list">
  <div class="sermons-post">
    {{item.name}}
  </div>
</ng-container>


ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令


示例如下:

<ng-container *ngFor="let item of lists">
  <a href="# ">
    <img src="{{item.picurl}}" style="width:79px;height: 70px;">
  </a>
</ng-container>


DOM 输出:

<a href="#">
  <img src="{{item.picurl}}" style="width:79px;height: 70px;">
</a>


注:ng-container 渲染所包含的模板内容,不包含自身。