迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular 中带有 ngFor 的 trackBy 函数

作者:迹忆客 最近更新:2023/03/13 浏览次数:

本文将使用 ngFor 指令及其在 Angular 中的使用来解决 trackyBy

在 Angular 中使用带有 ngFortrackBy 函数

在 Angular 中,trackBy 功能允许用户选择一个特定的键,该键将用于基于该键分析列表中的每个项目。当你有嵌套的数组和对象想要为每个数组和对象提供唯一标识符时,trackBy 特别有用。

重要的是要注意 trackBy 仅适用于数组或对象的当前迭代,而不是所有未来的迭代。

在 Angular 中使用 ngFor 函数

由于 HTML 缺少内置的模板语言,Angular 添加了强大的模板语法,包含多个指令,如 ngFor,类似于计算机语言中的 for-loops

NgForAngular 中的内置指令,可用于迭代数组或对象。该指令为列表中的每个项目创建一个模板,将其添加到 DOM,并在项目发生更改时更新 DOM

语法:

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

我们使用 ngFor 指令来迭代任何数组或对象集合。但是,如果我们需要在某个时候更新集合中的信息,例如响应一个 HTTP 请求,我们就会遇到问题。

因此,Angular 必须删除并重新创建所有与数据链接的 DOM 元素。我们帮助 Angular trackBy 函数来解决这个问题。

trackBy 函数接受两个参数,indexcurrent item。它必须返回项目的特定标识。

Angular 现在可以根据特定身份跟踪添加或删除了哪些组件。只有构造函数会删除更新数组时已经修改的项目。

在 Angular 中使用 trackByngFor

让我们讨论使用 Angular 的 ngFor 指令的 trackBy 函数。

  • 首先,我们必须了解 Angular 的基本原理以及它是如何工作的。
  • 我们必须安装最新版本的 Angular 命令行界面。
  • 系统必须安装最新的 Node JS 版本。

我们现在将创建一个程序,该程序使用模板的数组来显示有关员工的信息。我们使用 ngFor 指令循环遍历员工数组并显示每个员工的基本信息。

我们还创建了一个 trackBy 方法,该方法必须唯一标识每个员工并将其分配给 ngFor 指令。

代码片段 - app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  informations: { id: number; name: string; Age: string; }[];

  EmplyeesInfo(){
    this.informations = [
      { id:1, name:'Adil',  Age:' (Age 24)' },
      { id:2, name:'Steve' , Age:' (Age 30)'},
      { id:3, name:'John' ,Age:' (Age 27)'},
      { id:2, name:'Sofia' , Age:' (Age 23)' },
      { id:3, name:'Adam', Age: ' (Age 36)' }
    ];
  }
  trackEmployee(index: any,information: { id: any; }){
    return information ? information.id : undefined;
  }
}

代码片段 - app.component.html

<button (click)="EmplyeesInfo()">Employees Information</button>
<ul>
  <li *ngFor="let information of informations; trackBy: trackEmployee">
    {{ information.name }}
    {{ information.Age }}
  </li>
</ul>

输出:

Angular 中带有 ngFor 的 trackBy 函数

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便