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

Question

我有一个包含 4 个项目的列表，前 2 个可见，后 2 个隐藏。还有一个“显示更多/更少”按钮，用于切换最后 2 项的可见性。

<ol>
  <li *ngFor="let errorList of errorItems | slice: 0:count">
    <p>{{ errorList }}</p>
  </li>
</ol>
<p *ngIf="errorItems.length > 2" (click)="viewMoreClicked()">view more details</p>

我要多看少看

Answer 1

试试这个 -

<ol>
  <li *ngFor="let type of items | slice: 0:count">
    <p>{{ type?.value }}</p>
  </li>
</ol>
<p *ngIf="items.length > 2 && count == 2" (click)='count=items.length'>view more details</p>
<p *ngIf="count != 2" (click)='count=2'>view less details</p>

count = 2;

Working Example

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

Show / Hide list items in Angular in the HTML angular

html

angular

angular9