如何在Angular中转义左大括号？示例及预期输出说明

要得到预期的{1,2,3,4}输出，你可以通过以下方式处理第一个左大括号：

• 直接用插值表达式输出字面量左大括号：把单独的{替换成{{ '{' }}，Angular会将其解析为普通文本，而非模板语法的一部分。

修改后的代码示例：

<div>
    {{ '{' }}
    <ng-container *ngFor="let x of [1,2,3,4]; let last=last">
        {{x}} 
        <ng-container *ngIf="!last">,</ng-container>
    </ng-container>
    }
</div>

• 备选方案：使用[innerHTML]绑定：如果需要更灵活的文本渲染，也可以用ng-container结合属性绑定输出左大括号，不过这种方式对于简单场景稍显繁琐：

<div>
    <ng-container [innerHTML]="'{'"></ng-container>
    <ng-container *ngFor="let x of [1,2,3,4]; let last=last">
        {{x}} 
        <ng-container *ngIf="!last">,</ng-container>
    </ng-container>
    }
</div>

两种方法都能让模板正确渲染出{1,2,3,4}的效果，优先推荐第一种插值表达式的方式，代码更简洁易读。

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