如何为Angular 17升级CDK虚拟循环cdkVirtualFor至@语法

迁移步骤与代码示例 #

原代码中的*cdkVirtualFor可以结合Angular 17的@for新语法完成迁移，核心是保留cdkVirtualFor指令（负责虚拟滚动逻辑），同时用新的@for语法替代旧结构指令写法：

原代码（修正class属性语法错误后）

<tbody>
  <tr
    class="border-top border-gray-400 virtual-scroll-row scrollable"
    def-row
    *cdkVirtualFor="let entry of entries; index as i; trackBy: track"
    [entry]="entry"
    [twid]="'row-' + i"
  ></tr>
</tbody>

迁移后的代码

<tbody>
  @for (entry of entries; track track(entry); let i = $index) {
    <tr
      class="border-top border-gray-400 virtual-scroll-row scrollable"
      def-row
      cdkVirtualFor
      [entry]="entry"
      [twid]="'row-' + i"
    ></tr>
  }
</tbody>

关键说明 #

• 保留cdkVirtualFor指令：新@for是Angular结构语法糖，虚拟滚动核心逻辑仍由cdkVirtualFor指令处理，因此需在<tr>上保留该指令（无需星号*）。
• trackBy 写法调整：@for中通过track关键字指定追踪函数，直接传入track(entry)即可（若你的track函数接收索引与条目参数，可写track(i, entry)）。
• 索引获取方式：原代码的index as i替换为let i = $index，这是新控制流语法的标准写法。

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