如何使用基于条件angular2的ngFor渲染不同的项目

Question

我必须使用ngFor动态创建一些html组件。需要根据json的值来渲染不同的项目，如文本框，选择等。

我知道如何在javascript中使用for循环和if条件。但角度2的替代是什么？

例如

for(var i=0;i<data.length;i++){
    if(data.type=="textbox"){
      $('#container').append(//textbox snippet)
    }

    if(data.type=="select"){
      $('#container').append(//select snippet)
    }
}

角度2的替代方案是什么？任何帮助非常感谢。

Answer 1

您可以使用*ngIf指令。

例如：

<div *ngIf="(data.type == 'textbox')">
<!--textbox snippet here-->
</div>

或

<input *ngIf="(data.type == 'textbox')" type="text" value="" />

这是关于*ngIf指令的documentation