Angular14生产环境下ngFor索引调用scp_list属性报错问题

这个问题的核心是Angular生产模式下的变更检测优化导致管道参数的求值时机早于插值表达式——虽然插值显示正常，但管道执行时scp_list[i]['absiccValues']可能还未完成初始化，从而抛出undefined错误。

具体解决方法 #

1. 使用可选链操作符保护管道参数 #

直接在模板里给参数加上可选链，避免访问undefined属性：

<ng-container *ngFor="let item of col.field; let i = index">
    <input type="number" step="any" [(ngModel)]="piece[item.field_name]" 
        [style.backgroundColor]="piece[item.field_name] | bafBackgroundColor:item.field_name:scp_list[i]?.['absiccValues']">
    {{scp_list[i]['absiccValues'].max}}
    {{i}}
</ng-container>

这样当scp_list[i]或absiccValues未定义时，会传递undefined给管道，而非直接抛出错误。

2. 给管道添加空值校验 #

修改bafBackgroundColor管道的transform方法，先检查参数是否存在，再执行逻辑：

transform(value: number, fieldName: string, absiccValues?: any): string {
    // 先判断absiccValues是否存在
    if (!absiccValues) {
        return 'transparent'; // 或者返回你需要的默认背景色
    }
    // 原管道业务逻辑
    // ...
}

3. 确保scp_list提前初始化 #

在组件类里给scp_list设置初始值，避免它初始为undefined：

scp_list: any[] = []; // 初始化为空数组，而非undefined

4. 用*ngIf确保数据就绪后再渲染 #

如果scp_list是异步加载的（比如从API获取），可以在父容器添加*ngIf判断，确保数据加载完成后再渲染循环：

<div *ngIf="scp_list.length > 0">
    <ng-container *ngFor="let item of col.field; let i = index">
        <input type="number" step="any" [(ngModel)]="piece[item.field_name]" 
            [style.backgroundColor]="piece[item.field_name] | bafBackgroundColor:item.field_name:scp_list[i]['absiccValues']">
        {{scp_list[i]['absiccValues'].max}}
        {{i}}
    </ng-container>
</div>

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