在UI上,我们有符合评估条件的教室。创建并添加符合条件的教室后,我将获得每个教室类型的副本。预期输出是每个教室的一个。
相关HTML:
<div class="eligible-classrooms">
<h5 class="semi-bold btm-gap-sm">Eligible Classrooms</h5>
<div class="classrooms">
<!-- ko foreach: model.sortedEligibleClassrooms -->
<div class="classroom">
<span data-bind="text: $data.ageRangeTypeName"></span><span class="count" data-bind="text: $data.numClassrooms"></span>
</div>
<!-- /ko -->
</div>
</div>
相关 typescript :
型号:
numberOfEligibleClassrooms: KnockoutObservableArray<{ ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }>,
sortedEligibleClassrooms: KnockoutComputed<Array<{ ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }>>
self.model:
numberOfEligibleClassrooms: ko.observableArray([]),
sortedEligibleClassrooms: null,
constructor(orgCaseId: number, observationType: ObservationTypeModel, orgObservationSetTypeId: number) {
var self = this;
self.model.sortedEligibleClassrooms = ko.computed(function () {
return self.model.numberOfEligibleClassrooms().sort((left: { ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }, right: { ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }): number => {
return left.ageRangeTypeId > right.ageRangeTypeId ? 1 : -1;
});
}, self.model.numberOfEligibleClassrooms);
self.load = (): void => {
CommonFactory.AppSettings.get('OrgClassroomCollectMajorityAgeRange', function (setting: IApplicationSetting) {
const majorityAgeRangeEnabled = setting ? setting.value.toString().toLowerCase() === 'true' : false;
OrgFactory.ObservationTypeAgeRangeTypes.search({ "observationTypeId": self.model.observationType.id(), isCount: true }, function (ageRangeTypes) {
for (var j = 0; j < ageRangeTypes.length; j++) {
// The following function preserves the scope of the variables
(function (ageRangeTypeId, ageRangeTypeName) {
var minimumAgeRangeTypeId = self.settings.isERSObservation() ? ageRangeTypeId : null;
var search = {
minimumAgeRangeTypeId: minimumAgeRangeTypeId,
includesAgeRangeTypeId: majorityAgeRangeEnabled ? null : ageRangeTypeId,
majorityAgeRangeTypeId: majorityAgeRangeEnabled ? ageRangeTypeId : null,
isCount: true
};
OrgFactory.OrgCase.getEligibleObservationClassrooms(orgCaseId, search, function (data) {
self.model.numberOfEligibleClassrooms.push({ ageRangeTypeId: ageRangeTypeId, ageRangeTypeName: ageRangeTypeName, numClassrooms: data.length });
});
})(ageRangeTypes[j].ageRangeTypeId, ageRangeTypes[j].ageRangeTypeName);
}
});
});
}
输出:
1条答案
按热度按时间qojgxg4l1#
为了解决这个问题,我创建了一个distinctEligibleClassrooms方法,该方法对符合条件的教室列表进行明确排序:
我将其直接添加到当前的sortedEligibleClassrooms方法下,并将其删除,因为它将不再使用。