使用primeng OverlayComponent检测角度变化的ngFor

import { OverlayModule } from 'primeng/overlay';

<div *ngFor="let item of items">
  <button pButton type="button" (click)="showOverlay($event, item)">{{ item.name }}</button>
  <ng-template #overlayTemplate let-item>
    <div class="overlay-content">
      <h3>{{ item.name }}</h3>
      <p>{{ item.description }}</p>
    </div>
  </ng-template>
</div>

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { OverlayPanel } from 'primeng/overlaypanel';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  items = [
    { name: 'Item 1', description: 'Description 1' },
    { name: 'Item 2', description: 'Description 2' },
    { name: 'Item 3', description: 'Description 3' }
  ];

  @ViewChild('overlayTemplate') overlayTemplate: TemplateRef<any>;
  @ViewChild('overlayPanel') overlayPanel: OverlayPanel;

  showOverlay(event: any, item: any) {
    this.overlayPanel.show(event, {
      template: this.overlayTemplate,
      context: { $implicit: item }
    });
  }
}