如何在Angular html中防止重复？

<div *ngIf="shouldRender">
  <!-- 这里的内容只有在 shouldRender 为 true 时才会显示 -->
</div>

// 在组件类中定义 trackBy 函数
trackByFn(index: number, item: any): number {
  return item.id; // 假设每个项目都有一个唯一的 id 属性
}

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

<ng-container *ngIf="condition">
  <div>内容1</div>
  <div>内容2</div>
</ng-container>

// 创建一个可复用的组件
@Component({
  selector: 'app-reusable-component',
  template: `<div>{{ data }}</div>`
})
export class ReusableComponent {
  @Input() data: any;
}

<app-reusable-component [data]="item1"></app-reusable-component>
<app-reusable-component [data]="item2"></app-reusable-component>

// 创建一个自定义管道
@Pipe({
  name: 'customFilter'
})
export class CustomFilterPipe implements PipeTransform {
  transform(items: any[], filter: string): any[] {
    return items.filter(item => item.includes(filter));
  }
}

<div *ngFor="let item of items | customFilter:'keyword'">{{ item }}</div>