如何在angular2的ngFor中显示1个元素? [英] How to show 1 element in ngFor in angular2?

查看:27
本文介绍了如何在angular2的ngFor中显示1个元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个简单的 ngFor 循环数组.但是,我添加了一个条件,即索引为 <5 继续添加标签.之后,我想添加一个额外的标签,将使用下拉列表查看其余标签.但它不起作用.

  • <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a><div *ngIf="module.Tags.length > 5 && i == 6">下拉按钮</div>
  • 这里的功能是我不想向用户显示无限数量的标签,我想将其限制为仅 5 个标签,并在 5 个标签后有一个按钮,用于显示带有剩余标签.

    这可以在 angular2 中实现吗?

    如果有,请赐教.

    解决方案

  • <a href="#" class="span-tag tag">{{ tag }}</a><div *ngIf="last">下拉按钮</div>
  • https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

    要添加所有内容,但可以使用在第 5 个项目之后添加的

    DropDown Button

    :

    show = 5;<li *ngFor="let tag of module.Tags|slice:0:show let i=index"><a href="#" class="span-tag tag">{{ tag }}</a><div *ngIf="i==4 && show == 5" (click)="show = module.Tags.length">下拉按钮</div>

    I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work.

    <li *ngFor="let tag of module.Tags; let i = index">
      <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a>
      <div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div>
    </li>

    The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags which will be used to show the dropdown with the remaining tags.

    Is this possible to do in angular2?

    If so, please enlighten me.

    解决方案

    <li *ngFor="let tag of module.Tags | slice:0:5; let last=last">
      <a href="#" class="span-tag tag">{{ tag }}</a>
      <div *ngIf="last">DropDown Button</div>
    </li>
    

    https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

    To get all added but the <div>DropDown Button</div> added after the 5th item you can use:

    show = 5;
    
    <li *ngFor="let tag of module.Tags|slice:0:show let i=index">
      <a href="#" class="span-tag tag">{{ tag }}</a>
      <div *ngIf="i==4 && show == 5" (click)="show = module.Tags.length">DropDown Button</div>
    </li>
    

    这篇关于如何在angular2的ngFor中显示1个元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆