ng如果需要在ngcontainer中处理

Question

当update flag设置为true时，需要检查field的值是否有变化。如果值发生变化，需要删除旧值并用粗体更新新值。 这适用于总分数，但我无法处理主题分数。 另外，如果两个值均为 NA 或空，则如何隐藏 newData NA 模板。 html 的结构也应该与 subjectMarks 的 Totalmarks 相同。

html:

      <div class="mt-15 field"> 
      <p>Total marks</p> <div 
      *ngIf="!update">{{ 
      newData?.totalMarks|| 'N/A' 
        }}</div> <div 
       *ngIf="update" 
[class]="checkCss('totalMarks')"> 
<span>{{ newData?.totalMarks || 
'N/A'}}</span><br> <strong>{{ 
 oldData?.totalMarks || 'N/A'}} 
  </strong> </div> </div>

---

<div class="field">
  <p>Subject Marks</p>
  <div *ngIf="update" [class]="checkCss('marks')">      
    <span><ng-container
      [ngTemplateOutlet]="newData?.marks?.length ? MultiTemplate : NATemplate"

      [ngTemplateOutletContext]="{items: newData?.mark, 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 *ngIf="!update">
  <ng-container
    [ngTemplateOutlet]="oldData?.marks?.length ? MultiTemplate : NaTemplate"
    [ngTemplateOutletContext]="{items: oldData?.marks,map: dataMap.marksMapping}">
  </ng-container></div>
</div>
</div>

<ng-template #MultiTemplate let-items="items" let-map="map" let-hyphen="hyphen">
  <span *ngFor="let item of items || []; let i = index">
    <span *ngIf="i">{{ _ }}</span>
    <span *ngIf="hyphen">{{ item }} &hyphen;</span>
      {{ formGroup ? map?.[item] : item }}
    </span>
    </ng-template>

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

ts：

    getClass = (fieldName: 
   string) => {
    const originalValue = 
    this.oldData?.[fieldName]
     const currentValue = 
     this.newData?.[fieldName]
     return originalValue !== 
      currentValue ? 'updated' : 
     'hidden'
      }

CSS：

      .hidden {
      strong {
     display: none;
       }

     br {
     display: none;
     }

     span {
    font-weight: regular;
     }
    }

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

    strong {
    color: #db0011;
    display: unset;

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

  br {
   display: unset;
   }
  }

Answer 1

请更改 html 中的条件并更新 html 代码，如下所示。

<div class="field">
  <p>Subject Marks</p>
  <div *ngIf="update" [class]="checkCss('marks')">
    <span>
      <ng-container *ngIf="newData?.marks?.length; else NATemplate"
        [ngTemplateOutlet]="MultiTemplate"
        [ngTemplateOutletContext]="{ items: newData?.marks, map: dataMap.marksMapping }">
      </ng-container>
    </span><br>
    <strong>
      <ng-container *ngIf="oldData?.marks?.length; else NaTemplate"
        [ngTemplateOutlet]="MultiTemplate"
        [ngTemplateOutletContext]="{ items: oldData?.marks, map: dataMap.marksMapping }">
      </ng-container>
    </strong>
  </div>
  <div *ngIf="!update">
    <ng-container *ngIf="oldData?.marks?.length; else NaTemplate"
      [ngTemplateOutlet]="MultiTemplate"
      [ngTemplateOutletContext]="{ items: oldData?.marks, map: dataMap.marksMapping }">
    </ng-container>
  </div>
</div>

<ng-template #MultiTemplate let-items="items" let-map="map" let-hyphen="hyphen">
  <span *ngFor="let item of items || []; let i = index">
    <span *ngIf="i">{{ hyphen }}</span>
    <span>{{ formGroup ? map?.[item] : item }}</span>
  </span>
</ng-template>

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