Angular 使用“显示更多”和“显示更少”按钮在列表中显示固定数量的项目

我有一个很长的列表，我只想显示固定数量的项目（比如5个）。单击showmore按钮，列表应该会变大。当列表上的所有项目都被呈现时，显示按钮应该出现。“无显示”按钮应可单击，直到列表大小再次变为5。任何帮助都将不胜感激

这是我的密码：

---

我还想在列表项被添加或从列表中删除时显示0.5s的转换。

您可以这样做：

HTML:

数据行
{{l}

显示更多
炫耀的

TS:

从“@angular/core”导入{Component，ElementRef，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
@ViewChild（“数据行”）显示行；
按钮可见性={
更多：是的，
减：假
};
givenList=[1,2,3,4,5,6,7,8,9,10,11]；
renderedList=this.givenList.slice（0,5）；
计数器=1；
renderAllItems=false；
showmoress（moreOrLess:“more”|“less”）{
如果（更多或更少==“更多”）{
//无需设置渲染数组中包含所有项的任何内容
if（this.givenList.length/5+1==this.counter）{
返回；
}
这个.counter++；
}否则{
//如果较小，则减小计数器，如果计数器为0，则将其设为1
this.counter=--this.counter | 1；
}
//呈现列表将是计数器*5
this.renderList=this.givenList.slice（0，this.counter*5）；
//这是一个标志，显示较少的按钮，一旦我得到了结束，并继续显示它一旦它是真的
这是我的手稿=
这是我的手稿||
this.renderList.length==this.givenList.length；
此.setButtonsVisibility（）；
}
setButtonsVisibility（）{
//显示更多按钮，而我们没有结束
这个.buttonsVisibility.more=
this.renderList.length

---

您可以在这里使用代码：

为什么不使用像Thanke for the reply@yazantahhan这样的库呢。我不想要滚动，我想要单击按钮来显示/隐藏列表。问题：如何计算DOM上显示的li项的数量？可以有一个包含渲染项的变量。请在下面核对我的答案

<ul *ngFor="let l of renderedList" dataRows>
  <li>{{l}}</li>
</ul>
<button *ngIf="buttonsVisibility.more" (click)="showMoreOrLess('more')"> show more</button>
<button *ngIf="buttonsVisibility.less" (click)="showMoreOrLess('less')"> showLess</button>

import { Component, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("dataRows") shownRows;
  buttonsVisibility = {
    more: true,
    less: false
  };
  givenList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  renderedList = this.givenList.slice(0, 5);
  counter = 1;
  renderedAllItems = false;

  showMoreOrLess(moreOrLess: "more" | "less") {
    if (moreOrLess === "more") {
      // No need to set anything of the rendered array contains all the items
      if (this.givenList.length / 5 + 1 === this.counter) {
        return;
      }
      this.counter++;
    } else {
      // If less, then decrease the counter, and if the counter got 0, then make it 1
      this.counter = --this.counter || 1;
    }
    // rendered list will be the counter * 5
    this.renderedList = this.givenList.slice(0, this.counter * 5);
    // This is a flag to show the less button once I got the end and keep showing it once it is true
    this.renderedAllItems =
      this.renderedAllItems ||
      this.renderedList.length === this.givenList.length;
    this.setButtonsVisibility();
  }

  setButtonsVisibility() {
    // Show more button while we didn't get the end
    this.buttonsVisibility.more =
      this.renderedList.length < this.givenList.length;
    // Show less button once I got the end or the renderedAllItems flag is true with the counter not 1 
    this.buttonsVisibility.less =
      this.renderedList.length === this.givenList.length ||
      (this.renderedAllItems && this.counter !== 1);
  }
}