Angular科目分数变更样式及NA模板隐藏问题求助

问题梳理 #

• 当update标志为true时，科目分数（Subject marks）无法像总分（Total marks）一样，在值变化时给旧值添加删除线、新值加粗
• 需要实现：新旧值均为NA/空值时，隐藏新数据的NA模板
• 科目分数的HTML结构需与总分保持一致

问题原因分析 #

1. TS对比逻辑缺陷：原getClass函数直接对比字段的引用值，但marks是数组（引用类型），即使数组内容变化但引用未变时，会被误判为无变化，导致样式不生效
2. HTML结构不一致：科目分数的update/非update分支结构与总分差异大，还存在模板引用错误（如newData?.mark应为newData?.marks，模板名称NATemplate与NaTemplate大小写不统一）
3. NA隐藏逻辑缺失：未判断新旧值均为NA/空的场景，导致不必要的NA模板显示

修改后的完整代码 #

1. TS代码（修正对比逻辑，新增NA判断）

// 辅助函数：对比两个数组内容是否完全一致
private arraysAreEqual(arr1: any[], arr2: any[]): boolean {
  if (arr1 === arr2) return true;
  if (!arr1 || !arr2) return false;
  if (arr1.length !== arr2.length) return false;
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) return false;
  }
  return true;
}

// 适配数组类型的样式判断函数
getClass = (fieldName: string) => {
  const originalValue = this.oldData?.[fieldName];
  const currentValue = this.newData?.[fieldName];
  
  // 处理数组类型字段（如marks）
  if (Array.isArray(originalValue) && Array.isArray(currentValue)) {
    return !this.arraysAreEqual(originalValue, currentValue) ? 'updated' : 'hidden';
  }
  
  // 处理普通类型字段（如totalMarks）
  return originalValue !== currentValue ? 'updated' : 'hidden';
}

// 判断新旧值是否均为NA/空
isBothNAOrEmpty(fieldName: string): boolean {
  const originalIsEmpty = !this.oldData?.[fieldName]?.length;
  const currentIsEmpty = !this.newData?.[fieldName]?.length;
  return originalIsEmpty && currentIsEmpty;
}

2. HTML代码（统一结构，修复模板错误）

<div class="mt-15 field">
  <p>Subject Marks</p>
  <!-- 非update状态：显示当前值 -->
  <div *ngIf="!update">
    <ng-container
      [ngTemplateOutlet]="newData?.marks?.length ? MultiTemplate : NaTemplate"
      [ngTemplateOutletContext]="{items: newData?.marks, map: dataMap.marksMapping}">
    </ng-container>
  </div>
  <!-- update状态：显示新旧值，根据变化应用样式，新旧均为NA时隐藏新值模板 -->
  <div *ngIf="update" [class]="getClass('marks')">
    <span *ngIf="!isBothNAOrEmpty('marks')">
      <ng-container
        [ngTemplateOutlet]="newData?.marks?.length ? MultiTemplate : NaTemplate"
        [ngTemplateOutletContext]="{items: newData?.marks, map: dataMap.marksMapping}">
      </ng-container>
    </span>
    <br>
    <strong>
      <ng-container
        [ngTemplateOutlet]="oldData?.marks?.length ? MultiTemplate : NaTemplate"
        [ngTemplateOutletContext]="{items: oldData?.marks, map: dataMap.marksMapping}">
      </ng-container>
    </strong>
  </div>
</div>

<!-- 修正模板语法，统一名称 -->
<ng-template #MultiTemplate let-items="items" let-map="map">
  <span *ngFor="let item of items || []; let i = index">
    <span *ngIf="i">, </span> <!-- 可根据需求调整分隔符 -->
    {{ formGroup ? map?.[item] : item }}
  </span>
</ng-template>

<ng-template #NaTemplate><div>NA</div></ng-template>

3. CSS代码（修正标准属性值）

.hidden {
  strong {
    display: none;
  }

  br {
    display: none;
  }

  span {
    font-weight: normal; /* 替换非标准值regular */
  }
}

.updated {
  span {
    text-decoration-line: line-through;
  }

  strong {
    color: #db0011;
    display: unset;

    span {
      text-decoration-line: none;
    }
  }

  br {
    display: unset;
  }
}

关键修改点说明 #

• TS部分：新增数组内容对比逻辑，确保科目分数的变化能被正确识别；新增isBothNAOrEmpty函数实现NA模板隐藏逻辑
• HTML部分：调整结构与总分完全对齐，修复模板引用错误，通过*ngIf控制新旧均为NA时的新值模板显示
• CSS部分：修正font-weight的非标准值，确保样式渲染符合规范

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