如何使用子数据对父模板进行消重(Angular 11)

// 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>

// 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>

// 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>