angular6.0开发教程：angular6.0数据循环*ngFor、if判断

前面我们介绍了angular6.0的单向数据绑定和双向数据绑定，这都是angular的数据传递。本章我们接着来介绍其它的数据传递方式：数据循环、if判断、绑定点击事件。

angular6.0视频教程

1：angular6.0数据循环

先在home.component.ts文件中添加一个数组：

hero = [{ id:1, name:'gaogao' },{ id:2, name:'wanlimm' },{ id:3, name:'ssmay' },{ id:4, name:'angular '}
];

然后在home.component.html文件中循环调用，代码如下：

{{ v.name }}

这里的hero就是上面定义的hero数组，*ngFor就是angular6.0的循环指令，就像php的foreach循环一样，每循环一次，把hero的一个元素赋值给v，然后，通过v.name输出。

2：angular6.0的if判断。

接着上面的代码继续。我们不想让数组中的id=2的元素显示，代码如下:

{{ v.name }}

这里用到了angular6.0的 *ngIf指令。如果 v.id != 2 时，就显示。也就是排除了id=2的数组元素，即数组中的wanlimm不会显示出来。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！