Angular循环数组时状态对应错误消息不显示问题排查

问题 #

在Angular项目中循环group数组的values项，需求如下：

• 当项存在id时，显示带链接的id
• 当id不存在时，根据requestSentStatus和responseReceivedStatus的多条件判断，生成对应错误消息并显示

但目前无id项的错误消息为空，无法正常展示对应状态提示，请问问题出在哪里？

相关代码：

TS代码 #

errMsg: string
const group = [
    {
        "name": "TSPM Process Connector Validation",
        "values": [
            {
                "id": "10007017",
                "url": "http://www.aol.com",
                "component": "TSPM Process Connector Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 1
            },
            {
                "id": "10007016",
                "url": "http://msn.com",
                "component": "TSPM Process Connector Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 1
            }
        ]
    },
    {
        "name": "TSPM Application Mapping Validation",
        "values": [
            {
                "component": "TSPM Application Mapping Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 0
            },
            {
                "component": "TSPM Application Mapping Validation",
                "requestSentStatus": 1,
                "responseReceivedStatus": 0
            }
        ]
    }
]

getStatusMessage(group) {
    if (group) {
        for (const mappedObj of group.values) {
          if (mappedObj.requestSentStatus === null || mappedObj.requestSentStatus === undefined) {
            this.errMsg = 'Enqueued for pickup and processing.'
          } else if (mappedObj.requestSentStatus === 0 ){
            this.errMsg = 'Failure sending data to CM.';
          } else if (mappedObj.requestSentStatus === 1) {
            if (mappedObj.responseReceivedStatus === null || mappedObj.responseReceivedStatus === undefined) {
              this.errMsg = 'CR generation awaited from CM.'
            } else if (mappedObj.responseReceivedStatus === 0) {
              this.errMsg = 'CR generation failed at CM.'
            } else if (mappedObj.responseReceivedStatus === 1) {
              this.errMsg = '';
            }
            console.log('errorMessage', this.errMsg);
          }
        }
     }
  }

HTML代码 #

<ol class="lmn-list-group lmn-list-group-initial">
     <ng-container *ngFor="let value of group.values">
             <li class="lmn-list-group-item" *ngIf="value.id; else crCreationFailTmp">
                  <a [href]="value.url" target="_blank" [mtTooltip]="value.id" placement="top">
                                      {{ value.id}}
                  </a>
             </li>
      <div class="lmn-pb-2 lmn-font-size-xs bfaText">{{ value.name }}</div>
    </ng-container>
 </ol>
 <ng-template #crCreationFailTmp>
       <li class="lmn-list-group-item lmn-pl-3 lmn-text-danger">{{errMsg}}</li>  
 </ng-template>

问题分析与解决方案 #

核心问题点 #

1. 全局变量覆盖：使用共享的errMsg存储所有项的状态消息，循环时后续项会覆盖之前的消息。比如遍历到有id且responseReceivedStatus=1的项时，errMsg会被设为空，导致无id项显示空消息。
2. 函数逻辑错误：getStatusMessage遍历整个group.values数组，最终errMsg只保留最后一个项的状态，无法为每个无id项单独生成消息。
3. 模板作用域问题：ng-template的位置在循环外部，无法获取当前循环项的上下文，只能读取全局errMsg，导致所有无id项显示同一条（甚至错误的）消息。
4. 模板数据绑定错误：原模板中{{ value.name }}是错误的，value是group.values的子项，不存在name属性，应该绑定group.name。

修正方案 #

1. 重构状态消息函数，改为单条数据处理

将函数改为接收单个value对象，返回对应状态消息，不再依赖全局变量：

getStatusMessage(value: any): string {
  if (!value) return '';
  
  if (value.requestSentStatus === null || value.requestSentStatus === undefined) {
    return 'Enqueued for pickup and processing.';
  } else if (value.requestSentStatus === 0) {
    return 'Failure sending data to CM.';
  } else if (value.requestSentStatus === 1) {
    if (value.responseReceivedStatus === null || value.responseReceivedStatus === undefined) {
      return 'CR generation awaited from CM.';
    } else if (value.responseReceivedStatus === 0) {
      return 'CR generation failed at CM.';
    } else if (value.responseReceivedStatus === 1) {
      return '';
    }
  }
  return '';
}

2. 调整模板结构，在循环内处理状态消息

把ng-template放到循环内部，直接为当前项调用函数获取消息，同时修正name的绑定：

<ol class="lmn-list-group lmn-list-group-initial">
  <ng-container *ngFor="let value of group.values">
    <li class="lmn-list-group-item" *ngIf="value.id; else crCreationFailTmp">
      <a [href]="value.url" target="_blank" [mtTooltip]="value.id" placement="top">
        {{ value.id}}
      </a>
    </li>
    <ng-template #crCreationFailTmp>
      <li class="lmn-list-group-item lmn-pl-3 lmn-text-danger">{{ getStatusMessage(value) }}</li>  
    </ng-template>
    <div class="lmn-pb-2 lmn-font-size-xs bfaText">{{ group.name }}</div>
  </ng-container>
</ol>

3. 移除全局errMsg变量

不再需要全局的errMsg，每个项的消息都是单独计算，彻底避免覆盖问题。

额外优化建议 #

为数据定义TypeScript接口，增强类型安全性，避免属性拼写错误：

interface ValidationItem {
  id?: string;
  url?: string;
  component: string;
  requestSentStatus?: number | null;
  responseReceivedStatus?: number | null;
}

interface ValidationGroup {
  name: string;
  values: ValidationItem[];
}

group: ValidationGroup[] = [
  // 你的数据
];

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