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

【问题标题】：Show / Hide list items in Angular in the HTML在 HTML 中的 Angular 中显示/隐藏列表项
【发布时间】：2019-01-15 21:30:32
【问题描述】：

我有一个包含 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>

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

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

【问题讨论】：

在 Angular 中，HTML 是组件的一部分。因此，您至少需要 1 个组件才能拥有一个 Angular 应用程序。
当然，我已经有很多组件了。我要问的是我是否需要在组件中有一个变量才能使其工作。
这是一个非常基本的角度问题。建议您阅读 Angular 基础知识，特别是 Components & Templates，您应该能够轻松解决这个问题。
是的，您需要将其绑定到一个值。我想说这样的行为可能更适合指令；这样每个人的范围就会更加孤立。

标签： angular angular6 angular7

【解决方案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'
 }
 }
 }

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

【讨论】：

【解决方案2】：

解决方案：（在所有解决方案之前，您应该将变量“可见”添加到您的 ts 文件中）

通过从 DOM 中删除元素：

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

通过动态类： 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 内部，所以在第 1 个解决方案中呈现的 HTML 将如下所示：

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

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

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

【讨论】：

【解决方案3】：

您可以使用 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”是一个变量（位于打字稿文件中），可以切换为真/假。如果 hidden 为 false 则显示 li，如果 hidden 为 true 则隐藏。

【讨论】：