在 HTML 中显示/隐藏 Angular 中的列表项

Question

我有一个包含 4 个项目的列表，前 2 个可见，后 2 个隐藏。

还有一个 "show more / less" 按钮，用于切换最后 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>

是否可以使用 Angular 在 HTML 中创建此功能？

我需要组件吗？我应该使用组件吗？

Answer 1

您可以使用 NgIf 指令根据条件显示和隐藏 HTML 项。

NgIf Documentation

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

"hidden" 将是一个变量（位于打字稿文件中），可以切换为 true/false。 hidden 为 false 时显示 li，hidden 为 true 时隐藏。

Answer 2

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

Demo

没有组件逻辑

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

Demo without component

Answer 3

解决方案：（在所有解决方案之前，您应该将变量 "visible" 添加到您的 ts 文件）

通过从 DOM 中删除元素：

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

通过动态 class： 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; }

通过隐藏指令：

<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看起来像：

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

此解决方案的最大缺点是当隐藏该元素时应该执行某些操作（例如，您内部有一些组件并且您希望在显示隐藏元素之前加载所需信息，因为所有用户都会在附近功能中看到该员工)

解决方案 2 和 3 是... *ngIf 的反面（DOM 包含 HTML，所以 ts 文件允许对内容做一些事情，也可以做一些内部操作）

在 HTML 中显示/隐藏 Angular 中的列表项

Show / Hide list items in Angular in the HTML

angular

angular6

angular7