问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Angular中如何利用List组件高效展示数据列表？

头像
Cococat
    11
    新手上路，请多包涵

    Angular中如何利用List组件高效展示数据列表？

    HarmonyOSharmonyos-next前端
    阅读 589
    avatarAI BotBETA

    在Angular中高效展示数据列表的核心方案：

    1. 使用*ngFor时必加trackBy

      // 组件中定义track函数
trackById(index: item, item: any): number {
  return item.id; // 根据数据唯一标识跟踪
}

// 模板
<mat-list>
  <mat-list-item *ngFor="let item of items; trackBy: trackById">
 {{ item.name }}
  </mat-list-item>
</mat-list>

    2. 虚拟滚动（处理大数据量）

      // 安装Material CDK后
import { ScrollingModule } from '@angular/cdk/scrolling';

// 模板
<cdk-virtual-scroll-viewport itemSize="50" class="list-container">
  <mat-list-item *cdkVirtualFor="let item of items">
 {{ item.name }}
  </mat-list-item>
</cdk-virtual-scroll-viewport>

    3. 分页懒加载（配合后端API）

      // 使用MatPaginator
@ViewChild(MatPaginator) paginator: MatPaginator;

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.paginator.page
 .pipe(
   switchMap(() => this.loadPageData())
 ).subscribe();
}
    4. 性能优化技巧
    5. 避免在模板中使用函数调用（改用纯管道）
    6. 使用OnPush变更检测策略
    7. 限制一次性渲染数据量（建议单页≤100条）
    8. 用ng-container减少DOM层级

    9. 样式优化

      .mat-list-item {
  contain: strict;   // 启用containment优化
  will-change: transform; // 提示浏览器优化
}

    选择策略依据：

    • ≤100条：常规*ngFor + trackBy
    • 100-1000条：虚拟滚动
    • ≥1000条：虚拟滚动 + 分页懒加载

    扩展方案：

    • 使用@angular-component/router-store管理列表状态
    • 使用Web Worker预处理数据
    • 考虑AG Grid或ngx-virtual-scroller第三方库

    注意：对于超大数据集（10万+），建议采用分窗算法(Windowed Rendering)并配合WebSocket实时更新。

    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12k4153
      1. 安装依赖
        npm install @angular/cdk rxjs
        ​
      2. 创建数据服务 (data.service.ts)
        import { Injectable } from '@angular/core';
        import { of } from 'rxjs';
        import { delay } from 'rxjs/operators';

      @Injectable({
      providedIn: 'root'
      })
      export class DataService {
      private mockData = Array.from({ length: 1000 }, (_, i) => ({

      id: i + 1,
content: `Item ${i + 1}`

      }));

      getData() {

      // 模拟异步请求（延迟 500ms 返回数据）
return of(this.mockData).pipe(delay(500));

      }
      }
      ​

      1. 列表组件 (list-demo.component.ts)
        import { Component, OnInit } from '@angular/core';
        import { DataService } from './data.service';

      @Component({
      selector: 'app-list-demo',
      templateUrl: './list-demo.component.html',
      styleUrls: ['./list-demo.component.css']
      })
      export class ListDemoComponent implements OnInit {
      items$ = this.dataService.getData();

      constructor(private dataService: DataService) {}

      // Track By 函数优化渲染
      trackByFn(index: number, item: any) {

      return item.id;

      }

      onClickItem(item: any) {

      console.log('Selected:', item.content);

      }
      }
      ​

      1. 组件模板 (list-demo.component.html)
        <!-- 虚拟滚动容器 -->
        <cdk-virtual-scroll-viewport
        class="scroll-area"
        itemSize="56" <!-- 每个条目的高度 -->
        style="height: 600px;"

        <!-- 渲染列表项 -->
        <div
        *cdkVirtualFor="let item of items$ | async; trackBy: trackByFn"
        class="list-item"
        (click)="onClickItem(item)"

        {{ item.content }}
        </div>
        </cdk-virtual-scroll-viewport>

      <style>
      .scroll-area {

      border: 1px solid #ccc;
overflow: auto;

      }

      .list-item {

      height: 56px; <!-- 必须与 itemSize 值一致 -->
padding: 12px;
display: flex;
align-items: center;
border-bottom: 1px solid #eee;

      }

      .list-item:hover {

      background: #f0f0f0;
cursor: pointer;

      }
      </style>
      ​

      1. 模块配置 (app.module.ts)
        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
        import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; // 导入虚拟滚动模块

      import { AppComponent } from './app.component';
      import { ListDemoComponent } from './list-demo.component';

      @NgModule({
      declarations: [

      AppComponent,
ListDemoComponent

      ],
      imports: [

      BrowserModule

      ],
      providers: [],
      bootstrap: [AppComponent],
      entryComponents: [CdkVirtualScrollViewport] // 注册虚拟滚动组件
      })
      export class AppModule { }
      ​

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题