Angular在JSON文件中读取很长的列表太慢了

发布于 2025-01-31 01:38:36 字数 446 浏览 2 评论 0原文

我有一个基本上从JSON文件中读取大列表的组件，并在列表中显示，您可以在其中使用scrollbar滚动。列表中的项目数量约为20000个项目。

我从服务中调用数据：

getData(){
    return this.httpClient.get(URL_HERE);
}

然后将其调用到我的组件中：

<ul>
    <li *ngFor="let biglist of item”>{{ item.name }}</li>
</ul>

首先，加载为滚动，然后列表滚动不是很好。

是否有更好的方法可以列出一个非常大的列表，例如一次只加载50个……因此，在向上或向下滚动时，您可以加载其他50个？

我只是不知道该如何以快速而流畅的方式进行加载和显示的方式。

原文

I have a component which basically reads a big list from a json file and shows it in a list, where you scroll using a scrollbar.
Number of items in the list is around 20000 items.

I call the data from a service:

getData(){
    return this.httpClient.get(URL_HERE);
}

And then call it into my component:

<ul>
    <li *ngFor="let biglist of item”>{{ item.name }}</li>
</ul>

First, the loading is scroll and then the list scrolling is not very smooth.

Is there a better way to list a very large list for example just load 50 at a time…so when scrolling up or down you get the other 50 loaded?

I just don’t know how to go about this in a way where the loading and showing of the list is quick and smooth.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百变从容 2025-02-07 01:38:36

我有一些解决方法，它有效，但并不完美。我在Angular 12.2中对其进行了测试。
对于具有低列表的列表，您可以使用此操作：

//in CSS:
.container {
  height: 2000px;
}

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid maroon;
  box-sizing: border-box;
  height: fit-content;
}

在App.component.ts文件中：

<cdk-virtual-scroll-viewport itemSize="500" class="container">
          <ul
            *cdkVirtualFor="let employee of employees" class="number">
            
              <li class="class1">HR. Bukhari no.{{ employee.number }}</li>
              <p class="class2">{{ employee.arab }}</p>
              <h2 class="class3">{{ employee.id }}</h2>
          </ul>
        </cdk-virtual-scroll-viewport>

在上面的示例中，该项目的大小为500px，并且容器具有2000px。因此，它将一次显示4个项目。您可以更改价值以理解它。
它的缺点，尺寸是固定的，即使您的项目大小都不同。

I have some workaround, it works but not perfect. I tested it in angular 12.2.
For the list with the different of list that is low, you can do with this:

//in CSS:
.container {
  height: 2000px;
}

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid maroon;
  box-sizing: border-box;
  height: fit-content;
}

and in app.component.ts file:

<cdk-virtual-scroll-viewport itemSize="500" class="container">
          <ul
            *cdkVirtualFor="let employee of employees" class="number">
            
              <li class="class1">HR. Bukhari no.{{ employee.number }}</li>
              <p class="class2">{{ employee.arab }}</p>
              <h2 class="class3">{{ employee.id }}</h2>
          </ul>
        </cdk-virtual-scroll-viewport>

In the example above, the item has size of 500px, and the container has 2000px. So, it will display 4 items at a time. You can change the value to understand it.
The cons of it, the size is fixed, even you have different size of item.

回复收藏 0 原文

~没有更多了~