Angular渲染含逗号空格的字符串时丢失后续内容求助

问题现象 #

使用Angular获取response.resultData中的字符串数组时，多数场景功能正常，但渲染包含“, ”（逗号加空格）的内容时，HTML会丢失逗号及空格后的部分。

示例：
原内容：

Hydrocephalus in infectious and parasitic diseases classified elsewhere (A00-B94.9, B99+)
渲染后：
Hydrocephalus in infectious and parasitic diseases classified elsewhere (A00-B94.9

相关代码 #

TypeScript代码 #

this.problemListService.getVisitWisePomrActive(patientPomr).subscribe(response => {
    if (response != null && Array.isArray(response.resultData) && (response.resultData.length > 0)) {
        problems = response.resultData.map(diagnosis => diagnosis.selectedDisease).join(' ,');
        console.log(problems);

HTML模板代码 #

<tr>
    <td colspan="18" style="font-size:11pt !important;padding:1px 5px !important"> Diagnosis :
    </td>
    <td colspan="158"
        style="border-bottom:1px dotted black !important;font-size:11pt !important;padding:1px 5px !important;">
        {{narcoticObj.diagnosis}}
    </td>
    <td colspan="16" style="font-size:11pt !important;padding:1px 5px !important; text-align: right;">:
        لتشخيص
    </td>
</tr>

接口响应数据 #

{
    "message": null,
    "messageCode": null,
    "validity": true,
    "resultData": [
        {
            "patientDiagnosisId": null,
            "patientId": 119486,
            "doctorId": 25055,
            "pomrId": 34417,
            "appointmentId": 0,
            "admissionId": 219581,
            "episodeId": null,
            "icdType": "ICD_AM",
            "icdVersion": null,
            "icdSubVersion": "2017",
            "diagnosisType": "2",
            "createdBy": null,
            "createdOn": "2022-03-29 01:29:32",
            "modifiedBy": "26500",
            "modifiedOn": "2022-03-29 07:10:26",
            "approvedBy": null,
            "approvedOn": null,
            "hospitalId": 59,
            "hospitalGroupId": 58,
            "clinicId": 350,
            "selectedIcdCode": "G94.0",
            "selectedDisease": "Hydrocephalus in infectious and parasitic diseases classified elsewhere (A00-B94.9, B99+)",
            "condition": "acute",
            "remarks": null,
            "problemName": "default",
            "assessmentId": null,
            "loginUserId": "26500",
            "location": "{\r\n  \"location1\" : {\r\n    \"displayName\" : \"ER\",\r\n    \"location\": \"ER\"\r\n  },\r\n  \"location2\" : {\r\n    \"displayName\" : \"Patient Dashboard\",\r\n  \"location\": \"PATIENT_DASHBOARD\"\r\n  }\r\n}",
            "isPreviousProblem": false,
            "deletedBy": null,
            "deletedOn": null,
            "deletedRemarks": null,
            "selectedDoctorId": null,
            "resolved": false,
            "active": true
        }
    ],
    "errorList": null 
}

字符串检查截图 #

解决方案 #

1. 改用innerHTML绑定：Angular插值绑定可能因隐含的HTML解析规则截断内容，替换为innerHTML确保完整渲染：

   <td colspan="158"
       style="border-bottom:1px dotted black !important;font-size:11pt !important;padding:1px 5px !important;">
       <span [innerHTML]="narcoticObj.diagnosis"></span>
   </td>
   

2. 转义特殊字符：提前转义字符串中的逗号，避免被误判为分隔符：

   problems = response.resultData.map(diagnosis => 
       diagnosis.selectedDisease.replace(',', ',')
   ).join(' ,');
   

3. 验证数据完整性：在组件中打印narcoticObj.diagnosis，确认数据传递过程中未被截断。

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