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>

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

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

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

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 2

解决方案：（在所有解决方案之前，应在ts文件中添加变量“ visible”）

通过删除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，因此在第一种解决方案中呈现的HTML如下：

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

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

解决方案nr 2和3是* ngIf的对面（DOM包含HTML，因此ts文件允许对内容进行某些操作，还可以进行一些内部操作）

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

“隐藏”将是一个变量（位于打字稿文件中），可以将其切换为true / false。如果hidden为false，则显示li；如果hidden为true，则显示li。

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

3 个答案: