• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:数据循环*ngFor、if判断

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

    作者: 分类:angular开发 点击: 783 次
    wordpress CMS主题:ssmay主题

      前面我们介绍了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
    本文时间:2018-06-06 09:44:52
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.