PrimeNG V18 Virtual Scroller与Angular 18 @if语法兼容问题求助

问题原因 #

你遇到的VirtualScroller空白渲染问题，核心是Angular新控制流语法（@if）与当前PrimeNG版本的兼容性冲突。PrimeNG旧版本对Angular 17+推出的新控制流语法（@if、@for等）支持不完善，导致组件模板无法正确解析，最终出现无报错的空白状态。你的@if写法本身语法合规，但在PrimeNG旧版组件的模板上下文里无法被识别。

修复方案 #

方案1：回退到传统*ngIf语法 #

直接将模板中的@if替换为Angular传统的*ngIf指令，这是最快速的兼容方案：

<div class="card flex justify-center">
  <p-virtualscroller
    [items]="items"
    [itemSize]="50"
    scrollHeight="200px"
    styleClass="border border-surface"
    [style]="{ width: '200px', height: '200px' }"
  >
    <ng-template pTemplate="item" let-item let-options="options">
      <div
        class="flex items-center p-2"
        [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
        style="height: 50px"
      >
        <span *ngIf="truthy">{{ item }}</span>
      </div>
    </ng-template>
  </p-virtualscroller>
</div>

方案2：升级PrimeNG到兼容版本 #

若想继续使用Angular新控制流语法，需将PrimeNG升级到17.0.0及以上版本（该版本开始全面支持Angular新控制流），执行升级命令：

npm install primeng@latest

升级完成后，你原有的@if写法可直接正常工作，无需修改模板代码。

验证说明 #

两种方案均可解决空白问题：

• 方案1无需改动依赖版本，适合需要保持现有环境稳定的场景
• 方案2能保留Angular新语法特性，适合追求最新技术栈的场景

内容的提问来源于stack exchange，提问作者CStreet