当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 }} ‐</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;
}
}
请更改 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>