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不会显示出来。