【发布时间】：2022-01-03 00:04:38
【问题描述】：
我想将数据从可观察数组显示到视图。当我使用 foreach 绑定时，显示的值全部替换为最后一个索引值，就像我想显示数据 A、B、C 但它显示 C、C、C 如果数据给出值 A, B 然后它显示 B, B 我不知道出了什么问题，因为这是我第一次在使用 foreach 时遇到这个问题
这是我使用的视图。 Foreach 部门显示得很好，但 coaOperasional 和 detailOperasional 不是。
function AddDepartmentModel(deptname, deptcode, coaop) {
var self = this;
self.deptname = ko.observable(deptname);
self.deptcode = ko.observable(deptcode);
self.coaOperasional = ko.observableArray([]);
$(coaop).each(function(key, item) {
self.coaOperasional.push(new AddCoaOperasional(item.type, item.detail));
});
self.totalOperasional = ko.computed(function() {
var total = 0;
for (var i = 0; i < self.coaOperasional().length; i++) {
if (!jQuery.isEmptyObject(self.coaOperasional()[i])) {
for (var j = 0; j < self.coaOperasional()[i].detailOperasional().length; j++) {
total += parseFloat(removePeriod(self.coaOperasional()[i].detailOperasional()[j].totalop(), ","));
}
}
}
return addPeriod(total, ",")
});
}
function AddCoaOperasional(type, detail) {
var self = this;
self.optype = ko.observable(type);
self.detailOperasional = ko.observableArray([]);
$(detail).each(function(key, item) {
self.detailOperasional.push(new AddDetailOperasional(item.code, item.coa, item.total, item.parent));
});
self.optypetotal = ko.computed(function() {
var total = 0;
for (var i = 0; i < self.detailOperasional().length; i++) {
var tamptot = self.detailOperasional()[i].totalop();
tamptot = tamptot.replace("<b>", "");
tamptot = tamptot.replace("</b>", "");
total += parseFloat(removePeriod(tamptot, ","));
}
return addPeriod(total, ",")
});
}
function AddDetailOperasional(code, coa, total, parent) {
var self = this;
if (parent == "yes") {
self.codeop = ko.observable("");
self.coaop = ko.observable("<b>" + coa + "</b>");
self.totalop = ko.observable("<b>" + addPeriod(Math.abs(total), ",") + "</b>");
} else {
self.codeop = ko.observable(code);
self.coaop = ko.observable(coa);
self.totalop = ko.observable(addPeriod(Math.abs(total), ","));
}
}
function MainModel() {
var self = this;
var listdept = getData();
self.departments = ko.observableArray();
listdept.map(function(i) {
self.departments.push(new AddDepartmentModel(i.deptname, i.deptcode, i.operasional));
});
}
var vm = new MainModel();
ko.applyBindings(vm);
function addPeriod(num, period) {
return num.toFixed(2).replace('.', period);
}
function removePeriod(str, period) {
return +str.replace(period, '.');
}
function getData() {
return [{
"deptname": "LEARNING JOURNEY",
"deptcode": "1",
"operasional": [
{
"type": "PENDAPATAN OPERASIONAL",
"detail": [
{
"coa": "PENDAPATAN UANG SEKOLAH BRUTO",
"code": "4.1.01.01",
"total": "0.00",
"parent": "no"
},
{
"coa": "POTONGAN UANG SEKOLAH",
"code": "4.1.01.91",
"total": "0.00",
"parent": "no"
},
{
"coa": "PENDAPATAN UANG SEKOLAH NETO",
"code": "4.1.01",
"total": "0.00",
"parent": "yes"
},
{
"coa": "PENDAPATAN UANG KEGIATAN BRUTO",
"code": "4.1.02.01",
"total": "0.00",
"parent": "no"
},
{
"coa": "POTONGAN UANG KEGIATAN",
"code": "4.1.02.91",
"total": "0.00",
"parent": "no"
},
{
"coa": "PENDAPATAN UANG KEGIATAN NETO",
"code": "4.1.02",
"total": "0.00",
"parent": "yes"
},
]
},
{
"type": "BEBAN OPERASIONAL",
"detail": [
{
"coa": "BEBAN REMUNERASI",
"code": "5.1.01.01",
"total": "0.00",
"parent": "no"
},
{
"coa": "BEBAN SEKOLAH",
"code": "5.1.01",
"total": "0.00",
"parent": "yes"
},
{
"coa": "BEBAN ADMINISTRASI KESISWAAN",
"code": "5.1.02.01",
"total": "0.00",
"parent": "no"
},
{
"coa": "BEBAN ASURANSI SISWA",
"code": "5.1.02.02",
"total": "0.00",
"parent": "no"
},
{
"coa": "BEBAN PENGHAPUSAN",
"code": "5.2.91",
"total": "0.00",
"parent": "yes"
}
]
}
],
"pajak": "0.00"
}];
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<tbody>
<tr data-bind="foreach: departments">
<td style="vertical-align:top">
<table class='table table-striped nowrap'>
<thead>
<tr>
<th colspan="2" data-bind="visible: $index() == 0"></th>
<th style="width:400px"><span data-bind="text: deptname">Nama Dept</span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<table class='table table-striped nowrap' data-bind="foreach: coaOperasional" style="width: 100%">
<tbody>
<tr>
<td colspan="2" data-bind="visible: $parentContext.$index() == 0">
<b><span data-bind="text: optype">Tipe</span></b>
</td>
<td><b> </b></td>
</tr>
</tbody>
<tbody data-bind="foreach: detailOperasional">
<tr>
<td data-bind="text: codeop,visible: $parentContext.$parentContext.$index() == 0">### code ###</td>
<td data-bind="html: coaop,visible: $parentContext.$parentContext.$index() == 0">### coa ###</td>
<td data-bind="html: totalop">0</td>
</tr>
</tbody>
<tbody>
<tr>
<td data-bind="visible: $parentContext.$index() == 0"></td>
<td data-bind="visible: $parentContext.$index() == 0"><b>JUMLAH <span data-bind="text: optype">Tipe</span></b></td>
<td><b><span data-bind="text: optypetotal"></span></b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td data-bind="visible: $index() == 0" colspan="2"><b>SURPLUS (DEFISIT) OPERASIONAL</b></td>
<td><b><span data-bind="text: totalOperasional"></span></b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>【问题讨论】：
-
抱歉，刚刚更新了
-
你还能添加一个（最小的！）
data的样本吗？ -
添加数据样本
-
我已经编辑了您的问题，以便代码示例停止抛出错误。对于您的下一个问题，请开始这样。没有人可以仅仅猜测您的数据，然后想象您的问题来自哪里。实际重现您的问题的代码是 Stack Overflow 的基本要求。现在请进行最后的更改，以使代码示例真正按照您描述的方式运行。
标签： javascript html knockout.js