Как показать 1 элемент в ngFor в angular2?

У меня есть простой ngFor, который перебирает массив. Однако я добавил условие, что пока индекс < 5 продолжает добавлять тег. и после этого я хочу добавить дополнительный тег только один раз, который будет использоваться в раскрывающемся списке для просмотра остальных тегов. Но не работает.

<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>

Особенность здесь в том, что я не хочу показывать пользователю неограниченное количество тегов, я хочу ограничить его только 5 тегами и иметь кнопку после 5 тегов, которая будет использоваться для отображения раскрывающегося списка с оставшимися тегами.

Можно ли это сделать в angular2?

Если да, то просветите меня, пожалуйста.


arrays angular tags ngfor angular-ng-if
person DingDong    schedule 25.02.2017    source источник
comment
Я не понимаю, в чем проблема. Вам нужны только первые 5 Tags и <div>DropDown Button</div>?   -  person Günter Zöchbauer    schedule 25.02.2017
comment
Да @ GünterZöchbauer   -  person DingDong    schedule 25.02.2017

Ответы (1)


arrow_upward
6
arrow_downward 

<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

Чтобы добавить все, кроме <div>DropDown Button</div>, добавленного после 5-го элемента, вы можете использовать:

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>
person Günter Zöchbauer    schedule 25.02.2017
comment
Но это показывает только это: <div *ngIf="last">DropDown Button</div>, а не первые 5 тегов - person DingDong; 25.02.2017
comment
Извините, забыл удалить *ngIf="i <5" - person Günter Zöchbauer; 25.02.2017
comment
Ах я вижу. И это позволит мне разместить остальные теги в раскрывающемся списке? что значит остальные теги после первых 5? - person DingDong; 25.02.2017
comment
Кажется, тогда я неправильно понял ваш вопрос и ваше «да» на мой комментарий. Если вы просто хотите добавить <div> после 5-го элемента, это легко. Я обновлю свой ответ. - person Günter Zöchbauer; 25.02.2017
comment
Итак, в вашем обновленном ответе происходит то, что он просматривает первые 6 тегов, затем раскрывающийся список, а затем остальные теги. Я хочу видеть первые 5 тегов, за которыми следует кнопка, в которой, когда пользователь нажимает, отображаются остальные, в противном случае остальные скрыты. - person DingDong; 25.02.2017
comment
Я обновил свой ответ. Возможно, это то, что вы хотите. Не совсем уверен, что канал slice будет работать таким образом, чтобы показывать все после щелчка, но я думаю, что да. - person Günter Zöchbauer; 25.02.2017
comment
Хммм, ваше право, труба не работает. Теперь все, что он показывает, - это первые 5 тегов. Но не кнопку, потому что мне нужна кнопка, чтобы щелкнуть и показать остальные теги. - person DingDong; 25.02.2017
comment
Обновился еще раз (код в обработчике (click)="...") - person Günter Zöchbauer; 25.02.2017
comment
Дело в том, что вы идете в правильном направлении, но проблема в том, что кнопка раскрывающегося меню не отображается. Он показывает первые 5 тегов, что хорошо - person DingDong; 25.02.2017
comment
Возможно, это как-то связано с его состоянием. Позвольте мне увеличить i до i == 5 && show === 5 - person DingDong; 25.02.2017
comment
Пятно на Мате, тебе просто нужно было сделать это i == 3 - person DingDong; 25.02.2017
comment
Именно то, что я искал! Спасибо! Не могли бы вы удалить лишние двойные кавычки из первого примера last="last" и пробел во втором примере между show и let. slice:0:showlet i=index". - person tschaka1904; 28.02.2017