ANGULAR 8 애플리케이션에서 TRACKBY를 사용하는 방법

Angular 8 애플리케이션에서 TrackBy를 사용하는 방법

이 기사에서는 Angular 애플리케이션에서 Track By를 사용하는 방법을 배울 것입니다.

모든 애플리케이션에서 애플리케이션을 더 빠르게 실행하려면 애플리케이션의 성능을 확인해야 합니다. ngular는 API에서 요청할 때마다 들어오는 데이터를 추적하는 데 사용되는 trackBy라는 메서드를 제공합니다.

API 요청에서 컬렉션으로 오는 데이터가 있고 ngFor 지시문을 사용하여 웹 페이지를 통해 데이터를 변경해야 한다고 가정합니다. 이 경우 Angular는 데이터와 관련된 모든 DOM 요소를 제거하고 DOM 트리에서 다시 생성합니다. 이는 많은 양의 데이터가 API에서 오는 경우 많은 DOM 조작이 발생함을 의미합니다.

전제 조건

Angular에 대한 기본 지식
Visual Studio 코드가 설치되어 있어야 합니다.
Angular CLI가 설치되어 있어야 합니다.
노드 JS가 설치되어 있어야 합니다.

1 단계

다음 NPM 명령을 사용하여 새 Angular 프로젝트를 생성해 보겠습니다.

ng new trackBy

2 단계

처음부터 확률적 경사하강법 파이썬

이제 다음 명령을 사용하여 새 구성 요소를 생성해 보겠습니다.

ng g c trackBy-example

3단계

이제 trackBy-example.component.html 파일을 열고 파일에 다음 코드를 추가합니다.

{{SampleMessage}}
   Art.No  Brand  Price/Unit  Provider  P. Art. N  S. A/C  
 
  {{product.ArtNo}}  {{product.Brand}}  {{product.Price }}  {{product.Provider}}  {{product.ProviderArtNo}}  {{product.SalesAccount}}  
 
 
 New Companies

Art.No	Brand	Price/Unit	Provider	P. Art. N	S. A/C
{{product.ArtNo}}	{{product.Brand}}	{{product.Price }}	{{product.Provider}}	{{product.ProviderArtNo}}	{{product.SalesAccount}}

여기에서는 아직 trackBy 함수를 사용하지 않습니다.

아래 코드에서 구조 지시문 *ngFor를 사용하여 trackby를 적용하는 방법을 확인할 수 있습니다.

마이크로 캡 암호화 보석 2021

4단계

이제 trackBy-example.component.ts 파일을 열고 이 파일에 다음 코드를 추가합니다.

import { Component, OnInit } from '@angular/core'; import { ProductsService } from '../product.service'; @Component({ selector: 'app-trackby', templateUrl: './trackby.component.html' }) export class TrackbyComponent implements OnInit { companyProduct: any[]; SampleMessage='Example of Angular Fetching records using TrackBy'; constructor(private productService: ProductsService) { } ngOnInit() { this.companyProduct = this.productService.getAllProductsUsingTrackBy(); } getNewCompanies(): void { this.companyProduct = this.productService.getAllProductsUsingTrackByExample(); } trackByArtNo(index: number, companyProduct: any): string { return companyProduct.ArtNo; } }

TrackBy 함수는 두 개의 인수를 취합니다. 첫 번째는 인덱스이고 두 번째는 현재 항목입니다. 고유 식별자를 반환 인수로 반환할 수 있습니다.

trackByArtNo(index: number, companyProduct: any): string { return companyProduct.ArtNo; }

5단계

이제 product.service.ts 파일을 열고 다음 코드를 추가합니다.

import { Injectable } from '@angular/core'; @Injectable() export class ProductsService { employees: any[]; constructor() { } getAllProductsUsingTrackBy() { return this.employees = [ { ProductId: 1, ArtNo: '100', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '101', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 2310.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '102', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '103', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 5810.23, BuyAccount: '123', SalesAccount: '321' } ]; } getAllProductsUsingTrackByExample() { return this.employees = [ { ProductId: 1, ArtNo: '100', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '101', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 2310.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '102', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '103', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 5810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '104', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 4770.23, BuyAccount: '143', SalesAccount: '211' }, ]; } }

이제 'npm start' 또는 'ng serve' 명령을 사용하여 프로젝트를 실행하고 출력을 확인할 차례입니다.

아래 이미지에서처럼 New Companies를 클릭하면 테이블에 하나의 새 항목이 추가됩니다.

globals() 파이썬

이미지제목입니다

trackBy 함수를 사용하지 않고 일반 *ngFor 지시문을 사용하면 Angular 애플리케이션은 모든 DOM 요소를 제거하고 동일한 데이터가 수신되더라도 DOM 트리에서 다시 생성합니다. 데이터가 많은 경우 애플리케이션 성능이 느려질 수 있습니다.

이미지제목입니다

그러나 trackBy의 도움으로 아래 이미지에서 볼 수 있듯이 새 DOM을 생성하지 않습니다. DOM에 새 데이터만 추가되어 애플리케이션 성능이 향상됩니다.

이미지제목입니다

결론

이 기사에서는 Angular 8 애플리케이션에서 NgFor와 함께 trackBy를 사용하는 방법을 살펴보았습니다.

이 기사에 대한 귀중한 피드백/의견/질문을 제공하십시오. 이 기사를 좋아하고 이해했다면 어떻게 개선할 수 있는지 알려주세요.

감사합니다!

#angular #Angular 8의 NgFor #프로그래밍

Angular 8 애플리케이션에서 TrackBy를 사용하는 방법

Angular 8 애플리케이션에서 TrackBy를 사용하는 방법

{{SampleMessage}}

결론

또한보십시오:

새로운 물건

가장 읽기 쉬운

에디터의 선택