Angular Material拖拽组件报错：Invalid ICU message. Missing '}' 原因排查

我尝试在Angular应用中使用Material拖拽功能，直接复制Angular Material官方文档中的代码到组件中，代码如下：

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
    @for (tok of sentTokens; track tok) {
    <div class="example-box" cdkDrag>{{tok}}</div>
    }
</div>

但却出现了以下错误：

Invalid ICU message. Missing '}'
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

我未发现代码中有未转义的大括号，请问报错原因是什么？

这个错误的核心原因是你当前使用的Angular版本不支持@for新控制流语法。

@for是Angular 17及以上版本才推出的新模板控制流语法，若你的项目基于Angular 16或更早版本，模板编译器无法识别@for标识，会将其当作普通文本处理，进而把后续的{误判为未转义的大括号，最终触发ICU解析错误和EOF错误。

解决方式有两种：

• 保留当前Angular版本：将@for替换为旧版的*ngFor语法，示例代码如下：

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" cdkDrag *ngFor="let tok of sentTokens; trackBy: trackToken">{{tok}}</div>
</div>

注：trackToken需在组件类中定义追踪函数，若无需自定义追踪逻辑，可简化为trackBy: index。

• 升级Angular版本：将项目升级至Angular 17及以上版本，Angular 17默认启用新控制流语法，升级后即可直接使用@for代码。

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