angular学习-ngFor,ngIf,ngSwitch1.ngFor2.ngIf3.ngSwitch

221 阅读 0 评论 146 点赞

我是靠谱客的博主可靠柚子，这篇文章主要介绍angular学习-*ngFor,*ngIf,*ngSwitch1.*ngFor2.*ngIf3.*ngSwitch，现在分享给大家，希望可以做个参考。

1.*ngFor

一般用于数据循环，例子（打印arr里边的值）如下：
ts：
在这里插入图片描述 html:

结果：
如果同时要打印出数组元素的index，可以在li中加入let key=index;：

结果：

ngIf用于条件判断，例子是如果flag为true，则100px100px的idv就显示出来：

//最开始设置flag为false
 public flag:boolean=false;
 //结果为div不显示，然后再把flag改为true

ts:
在这里插入图片描述 html:
结果：

除了上边的*ngIf用于条件判断，*ngSwitch同样也可以用作条件判断，举个例子，如果n=1,span标签显示红色，如果n=2,span标签显示绿色，如果n=3 ,span标签显示粉色，其他值默认为黑色。
ts：
在这里插入图片描述
html：

结果：

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。