Contents:

Angularv4.初体验


2041 浏览 5 years, 2 months

6 循环和条件判断 ngFor & ngIf

版权声明: 转载请注明出处 http://www.codingsoho.com/

06 ngFor and ngIf

添加变量

videoList= ["Item 1", "Item 2", "Item3"]

并且修改模板文件来显示这个列表

<h1>
  {{title}}
</h1>

<p *ngFor='let item of videoList' >
    {{item}}
</p>

接下来我们修改这个参数为字典，以JSON格式传输，这些将来都会以JSON格式从后端传输

  // videoList= ["Item 1", "Item 2", "Item3"]
  videoList = [
    {
      name: 'Item 1',
      slug: 'item-1',
    },
    {
      name: 'Item 2',
      slug: 'item-2',
    },
    {
      name: 'Item 3',
      slug: 'item-3',
    }
  ]

相应的修改模板如下

<p *ngFor='let item of videoList' >  
  <a href="{{item.slug}}">{{item.name}}</a>
</p>

我们也可以通过ngIF过滤显示的内容

<p *ngFor='let item of videoList' >  
  <a href="{{item.slug}}" *ngIf='item.slug == "item-1"'>{{item.name}}</a>
  <a href="{{item.slug}}" *ngIf='item.slug != "item-1"' style="color: red;">{{item.name}}</a>
</p>

这样第一个条目正常显示，其他条目红色着色显示