打字稿淘汰过滤器列表

Question

我有淘汰赛的问题，我想不通。我需要一个简单的过滤器。我的问题是我总是看到 self.Vouchers() 中的所有项目。过滤器不起作用，并且复选框似乎只有单向数据绑定；如果我在脚本中更改了一个值，没关系，但我无法更改网页上的检查。

模型：

function AppViewModel() {
var self = this;

self.FilterVouchersA = ko.observable<boolean>(true);
self.FilterVouchersB = ko.observable<boolean>(false);
self.FilterVouchersC = ko.observable<boolean>(false);

self.Vouchers = ko.observableArray<VoucherModel>();
self.FilteredVouchers = ko.computed(() => {
    var vouchersArray = self.Vouchers();
    return ko.utils.arrayFilter(vouchersArray, (voucher: VoucherModel) =>
    (
        self.FilterVouchersA && voucher.type() == VoucherType.A ||
        self.FilterVouchersB && voucher.type() == VoucherType.B ||
        self.FilterVouchersC && voucher.type() == VoucherType.C
    ));
});
}

ko.applyBindings(new AppViewModel())

剃须刀：

<input type="checkbox" data-bind="checked: FilterVouchersA " /> Voucher type A
<input type="checkbox" data-bind="checked: FilterVouchersB " /> Voucher type B
<input type="checkbox" data-bind="checked: FilterVouchersC " /> Voucher type C

<div id="Complications" class="Complications" data-bind="foreach: FilteredVouchers ">
 .... //Not important

Answer 1

我认为您只是没有正确分组逻辑，请尝试添加括号：

return ko.utils.arrayFilter(vouchersArray, (voucher: VoucherModel) =>
(
    (self.FilterVouchersA && voucher.type() == VoucherType.A) ||
    (self.FilterVouchersB && voucher.type() == VoucherType.B) ||
    (self.FilterVouchersC && voucher.type() == VoucherType.C)
)

如果这不起作用，请进入您的过滤器功能并确保它正在执行您想要的操作。其余的都很好。