Angular模板{{ }}插值表达式中是否支持使用toLocaleLowerCase()等函数

问题1：{{ }} 插值语法内能否调用 toLocaleLowerCase() 这类函数 #

可以。Angular 的插值表达式支持所有合法的 TypeScript/JavaScript 表达式，包括调用字符串、数组等内置类型的原生方法，只要调用对象存在、方法访问权限正常就可以正常执行。

你当前代码里 formControlName={{item.key.toLocaleLowerCase()}} 的写法本身是合法的，唯一需要注意的风险是：如果 item.key 为 null/undefined/非字符串类型时，调用方法会抛出运行时错误，导致页面渲染失败。

可替代的实现方案 #

方案1：加可选链兼容空值（改动最小） #

直接在调用前加可选链运算符 ?. 避免空值报错，同时建议把指令属性的插值写法改成方括号绑定 []，语法更规范，也避免复杂表达式出现解析异常，修改后代码如下：

<div *ngFor="let item of elements| keyvalue :originalOrder" class="row mt-3">
    <label class="col-md-4 offset-md-2 my-auto">{{item.key}}:</label>
    <input 
        type="text" 
        class='col-md-4 my-auto' 
        [formControlName]="item.key?.toLocaleLowerCase()" 
        [value]="item.value"
    />
</div>

方案2：封装纯管道（适合高频复用、大量列表渲染场景） #

如果你的项目里多处需要做小写转换、或者渲染的列表数据量很大，直接在模板里调用方法会在每次变更检测时重复执行，这时可以封装一个纯管道做转换，性能更优：

1. 定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'localeLower'
})
export class LocaleLowerPipe implements PipeTransform {
  transform(value: string | null | undefined): string {
    return value?.toLocaleLowerCase() || '';
  }
}

2. 模板中使用：

<input 
    type="text" 
    class='col-md-4 my-auto' 
    [formControlName]="item.key | localeLower" 
    [value]="item.value"
/>

纯管道只有在输入值发生变化时才会重新执行，不会每次变更检测都运行，性能开销比直接调用方法低很多。

方案3：预处理数据源（性能最优） #

如果你可以提前处理 elements 对象，直接在 TS 代码里把需要用的小写 key 提前生成好，模板里直接取值即可：

// 组件TS中预处理数据源
processedElements = Object.entries(this.elements).map(([key, value]) => ({
  key,
  lowerKey: key.toLocaleLowerCase(),
  value
}))

模板直接遍历处理后的数组即可，不需要在模板内做任何转换操作。

内容的提问来源于stack exchange，提问作者Niccolò Bertozzi