Показать / Скрыть элементы списка в Angular в HTML

Question

У меня есть список из 4 элементов, первые 2 видимых и последние 2 скрытых.

И кнопка «показать больше / меньше», которая переключает видимость последних 2 элементов.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li class="hidden">Item 3</li>
 <li class="hidden">Item 4</li>
</ul>

<a href="#">Show More</a>

Можно ли создать эту функцию в HTML с помощью Angular?

Нужен ли мне компонент?Должен ли я использовать компонент?

Answer 1

 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li class="hidden" *ngIf ="hidden">Item 3</li>
 <li class="hidden" *ngIf ="hidden">Item 4</li>
 </ul>

<a href="#" (click)="toggle()">{{showMore}}</a>

Компонент:

export class AppComponent  {
showMore = 'show More'
hidden: boolean;
toggle(){
this.hidden = !this.hidden;
if(this.hidden){
 this.showMore = 'show less'
} 

if(!this.hidden){
 this.showMore = ' show more'
 }
 }
 }

Демо

Без компонентной логики

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hidden" *ngIf ="hidden">Item 3</li>
<li class="hidden" *ngIf ="hidden">Item 4</li>
</ul>

<a href="#" (click)="hidden = !hidden"> {{hidden ? 'show less' : 'show more'}}</a>

Демо без компонента

Answer 2

Решения: (перед всеми решениями вы должны добавить переменную visible в ваш файл ts)

1. Через удаление элементов из DOM:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li *ngIf="visible">Item 3</li>
 <li *ngIf="visible">Item 4</li>
</ul>

2. через динамический класс: HTML:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li [class.some-hidden-class]="!visible">Item 3</li>
 <li [class.some-hidden-class]="!visible">Item 4</li>
</ul>

(s) CSS:

.some-hidden-class{ display: none; }

3. С помощью скрытой директивы:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li [hidden]="!visible">Item 3</li>
     <li [hidden]="!visible">Item 4</li>
    </ul>

На мой взгляд, решение 1. является лучшим, потому что если элементы скрыты, то в DOM вы не видите ничего внутри HTML, поэтому визуализированный HTML в 1-м решении будет выглядеть так:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

Самый большой недостаток этого решения - это когда какая-то операция должна выполняться, когда эти элементы скрыты (например, у вас есть какой-то компонент внутри, и вы хотите загрузить требуемую информацию, прежде чем показывать скрытые элементы, потому что все пользователи увидят эту функцию рядом с функцией)

Решения № 2 и 3 - это ... противоположность * ngIf (DOM содержит HTML, поэтому файлы ts позволяют что-то делать с контентом, а также выполнять некоторые внутренние операции)

Answer 3

Вы можете использовать директиву NgIf, чтобы отображать и скрывать элементы HTML на основе условия.

NgIf Документация

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li ngIf*="!hidden">Item 3</li>
 <li ngIf*="!hidden">Item 4</li>
</ul>

<a href="#">Show More</a>

«скрытый» - это переменная (находится в файле машинописного текста), которую можно переключать как true / false. Ли будет показан, если скрыто ложно, и скрыто, если скрыто истинно.