Angular 中带有 ngFor 的 trackBy 函数

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 在 Angular 中使用带有 ngFortrackBy 函数
  2. 在 Angular 中使用 ngFor 函数
  3. 在 Angular 中使用 trackByngFor
Angular 中带有 ngFor 的 trackBy 函数

本文将使用 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 函数

点击这里查看代码示例的演示。

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相关文章 - Angular Function