如何使用子数据对父模板进行消重(Angular 11)
在Angular 11中，使用子数据对父模板进行消重可以通过多种方式实现，以下是几种常见的方法：
方法一：使用*ngFor和trackBy
*ngFor指令用于迭代数组，并且可以通过trackBy函数来优化性能，避免不必要的DOM重绘。
示例代码：
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 1, name: 'Item 1' }, // 重复项
{ id: 3, name: 'Item 3' }
];
trackByFn(index, item) {
return item.id;
}
}<!-- parent.component.html -->
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>解释：
trackByFn函数用于跟踪每个项的唯一标识符（在这个例子中是id）。*ngFor指令使用trackBy: trackByFn来确保只有当项的标识符发生变化时，才会重新渲染该项。
方法二：使用管道（Pipe）
可以创建一个自定义管道来过滤重复项。
示例代码：
// unique.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'unique'
})
export class UniquePipe implements PipeTransform {
transform(items: any[], key: string): any[] {
const uniqueItems = [];
const seen = new Set();
for (const item of items) {
if (!seen.has(item[key])) {
seen.add(item[key]);
uniqueItems.push(item);
}
}
return uniqueItems;
}
}// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 1, name: 'Item 1' }, // 重复项
{ id: 3, name: 'Item 3' }
];
}<!-- parent.component.html -->
<ul>
<li *ngFor="let item of items | unique:'id'">{{ item.name }}</li>
</ul>解释：
UniquePipe管道通过指定的键（在这个例子中是id）来过滤重复项。- 在模板中使用
*ngFor指令结合unique管道来显示唯一的项。
方法三：使用组件和服务
可以将去重逻辑封装在一个服务中，并在组件中使用该服务。
示例代码：
// unique.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UniqueService {
uniqueItems(items: any[], key: string): any[] {
const uniqueItems = [];
const seen = new Set();
for (const item of items) {
if (!seen.has(item[key])) {
seen.add(item[key]);
uniqueItems.push(item);
}
}
return uniqueItems;
}
}// parent.component.ts
import { Component } from '@angular/core';
import { UniqueService } from './unique.service';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 1, name: 'Item 1' }, // 重复项
{ id: 3, name: 'Item 3' }
];
constructor(private uniqueService: UniqueService) {}
getUniqueItems() {
return this.uniqueService.uniqueItems(this.items, 'id');
}
}<!-- parent.component.html -->
<ul>
<li *ngFor="let item of getUniqueItems()">{{ item.name }}</li>
</ul>解释：
UniqueService服务封装了去重逻辑。- 在组件中注入该服务，并使用
getUniqueItems方法获取唯一的项。
应用场景
这些方法适用于需要在Angular应用中显示唯一数据列表的场景，例如：
- 显示用户列表时，确保每个用户只显示一次。
- 显示产品列表时，避免重复的产品信息。
- 显示日志记录时，确保每条日志只显示一次。
参考链接
希望这些信息对你有所帮助！
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
