wordpress CMS主题 微信
Home > JS应用 > angular6.0使用教程:数据循环*ngFor、if判断

angular6.0使用教程:数据循环*ngFor、if判断

高时银博客 JS应用 点击: 83 次 0 1
  • 标签:
  • 前面我们介绍了angular6.0的单向数据绑定和双向数据绑定,这都是angular的数据传递。本章我们接着来介绍其它的数据传递方式:数据循环、if判断、绑定点击事件。

    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文件中循环调用,代码如下:

    <div>
      <li *ngFor="let v of hero">
         {{ v.name }}
      </li>
    </div>

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

    2:angular6.0的if判断。

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

    <div>
      <li *ngFor="let v of hero">
        <span *ngIf="v.id != 2">{{ v.name }}</span>
      </li>
    </div>

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

     


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201806065637.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论