Angular - 通过按钮显示数组列表中的隐藏值

Question

我正在处理我的网络应用程序中的值列表。 我面临以下问题：

app.component.html

这部分代码将我的数组显示为列表：

<div class="body__tags">
  <ng-container *ngFor="let tag of tags; let i=index">
    <li class="tags__list" *ngIf="i<5" [label]="tag"></li>
  </ng-container>
</div>

在这里，我在列表中设置了 5 个值的限制。 但有时数组中的值超过 5 个。 如何添加一个“显示全部”按钮，然后显示该列表中的所有内容？

app.component.ts

这是我的 ts 代码：

tags:any[]; 

splitTags() {
  if (this.data.tags != null) {
    this.tags = this.data.tags.split(";");
    console.log(this.tags)
  }
}

ngOnInit() {
  this.splitTags()
}

Answer 1

对于这种情况，使用*ngIf不是最好的主意。 您应该将array分割为 5 并存储到另一个变量中。 一旦用户单击按钮以显示所有数据，将整个array分配给新变量。

例如：

this.data = [1,2,3,4,5,6,7,8,9,10];
this.newData = data.slice(0,5);

然后在component.html文件中：；

<div class="body__tags">
  <ng-container *ngFor="let tag of newData; let i=index">
    <li class="tags__list" [label]="tag"></li>
  </ng-container>
</div>

单击按钮时，您应该将整个data分配给newData变量。

 public showAll(){
      this.newData = this.data;
   }

工作演示

Answer 2

您可以在某个变量中保留 5，然后单击“ShowAll（）”，您可以增加限制