在过滤列表和非过滤列表之间切换 [英] Toggling between filtered and non-filtered list
本文介绍了在过滤列表和非过滤列表之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试过滤掉没有投资金额的记录.如果您看到 JSON 结构，我正在尝试过滤 FundClassDetailsViewModel 对象.我将此数据发送到子组件.我需要提供一个切换功能，这样单击复选框将显示过滤列表，取消选中复选框将包含非过滤列表.我创建了一个名为 OriginalList 的对象，它在检索数据时被初始化.我将过滤后的列表存储在名为 Termdetails 的对象中.我可以看到过滤器工作正常.我还创建了一个事件发射器来从父组件到子组件发出一个名为 getInvestedDetails 的事件.如果选中该复选框，我将分配名为 TermDetails 的过滤对象，否则我将分配 OriginalList .出于某种原因，我没有看到包含所有记录的原始列表.我的逻辑有什么问题
I am trying to filter out records that don't have investment amount. If you see the JSON structure , I am trying to filter the FundClassDetailsViewModel object. I am sending this data to the child component. I need to provide a toggling feature such that clicking the checkbox would show filtered list and unchecking the checkbox would contain non-filtered list. I have created an object called OriginalList which is initialized at the time of retrieving the data. I am storing the filtered list in the object called Termdetails. I can see that filter is working fine. I have also created an eventemitter to emit an event from parent to child component called getInvestedDetails. If the checkbox is checked, I am assigning filtered object called TermDetails otherwise I am assigning OriginalList . For some reason I dont see the Original list containing all the records. Whats wrong with my logic
父组件
public getInvestedDetails(isInvested: boolean) {
if (isInvested) {
this.FundClasses = this.TermDetails.FundClassViewModel;
} else {
this.FundClasses = this.OriginalList.FundClassViewModel;
}
}
public getTermsDetails() {
if (this.ManagerStrategyId != null) {
this.termsService.getTermsDetails(this.ManagerStrategyId).subscribe((data: any) => {
this.TermDetails = data;
this.OriginalList = data;
this.FundClasses = this.TermDetails.FundClassViewModel;
this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail=> {
funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
.reduce((prev, next) => prev = prev.concat(next), [])
.filter(obj => obj.InvestedAmount !== null);
});
});
}
}
JSON 数据
{"FundClassViewModel":{"FundDetailsViewModel":[{"CogencyClasses":[{"Id":0,"FundId":0,"ShareClass":"Assign Cogency Fund First","LocalCurrency":null,"Name":"Assign Cogency Fund First "}],"FundClassDetailsViewModel":[{"Id":100541,"Description":"Class A","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11167,"LegalFundClassName":"Class A","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":5508,"FundName":"Sylebra Capital Partners (Offshore) Ltd"},{"Id":250033,"Description":"Class B","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11166,"LegalFundClassName":"Class B","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":5508,"FundName":"Sylebra Capital Partners (Offshore) Ltd"}],"PrimaryLegalFundClasses":[{"Id":11167,"Description":"Class A","ClassType":1},{"Id":11166,"Description":"Class B","ClassType":1}]},{"CogencyClasses":[{"Id":1121,"FundId":652,"ShareClass":"Class B","LocalCurrency":"USD","Name":"Class B USD"}],"FundClassDetailsViewModel":[{"Id":250028,"Description":"Class A","InvestedAmount":23732600,"InceptionDate":"2019-05-09T00:00:00","LegalFundClassId":13713,"LegalFundClassName":"Class A","DataReference":null,"CogencyClassId":1121,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250029,"Description":"Class B","InvestedAmount":119307314,"InceptionDate":null,"LegalFundClassId":13717,"LegalFundClassName":"Class B","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250030,"Description":"Class B1","InvestedAmount":null,"InceptionDate":"2014-05-01T00:00:00","LegalFundClassId":13716,"LegalFundClassName":"Class B1","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250031,"Description":"Class C","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13715,"LegalFundClassName":"Class C","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250032,"Description":"Class D","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13714,"LegalFundClassName":"Class D","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."}],"PrimaryLegalFundClasses":[{"Id":13713,"Description":"Class A","ClassType":3},{"Id":13717,"Description":"Class B","ClassType":3},{"Id":13716,"Description":"Class B1","ClassType":3},{"Id":13715,"Description":"Class C","ClassType":3},{"Id":13714,"Description":"Class D","ClassType":3}]}],"VehicleTypes":[{"Id":108,"Spf":false,"Name":"Secondaries","SortOrder":null,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":100,"Spf":false,"Name":"Co-Investment (non-SPF)","SortOrder":1,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":1,"Spf":false,"Name":"FX Trade","SortOrder":2,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":3,"Spf":false,"Name":"Listed ETF","SortOrder":3,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":4,"Spf":false,"Name":"Listed Security","SortOrder":4,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":2,"Spf":false,"Name":"Mutual Fund","SortOrder":5,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":5,"Spf":false,"Name":"Offshore Fund","SortOrder":6,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":6,"Spf":false,"Name":"Onshore US - 40 Act Fund","SortOrder":7,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":9,"Spf":false,"Name":"Onshore US Non - 40 Act Fund","SortOrder":8,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":8,"Spf":false,"Name":"EnTrustPermal Product","SortOrder":9,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":7,"Spf":true,"Name":"EnTrustPermal SPF - Standard","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Id":105,"Spf":true,"Name":"EnTrustPermal SPF – 40 Act","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":106,"Spf":true,"Name":"EnTrustPermal SPF – UCITS","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":102,"Spf":true,"Name":"EnTrustPermal SPF - Blocker","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":103,"Spf":true,"Name":"EnTrustPermal SPF - Co-Investment","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":104,"Spf":true,"Name":"EnTrustPermal SPF - Special Sit","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":10,"Spf":false,"Name":"Private Equity","SortOrder":11,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Id":101,"Spf":false,"Name":"Side-Pocket","SortOrder":12,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Id":11,"Spf":false,"Name":"Special Situation (non-SPF)","SortOrder":13,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":12,"Spf":false,"Name":"Third Party Fund of Funds","SortOrder":14,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":13,"Spf":false,"Name":"UCITS","SortOrder":15,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":14,"Spf":false,"Name":"Other","SortOrder":50,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false}],"ClosureStatuses":[{"Id":110,"Name":"Hard Closed","IsActive":true,"SortOrder":null},{"Id":111,"Name":"Open","IsActive":true,"SortOrder":null},{"Id":112,"Name":"Soft Closed","IsActive":true,"SortOrder":null},{"Id":1,"Name":"Open - to all","IsActive":true,"SortOrder":1},{"Id":2,"Name":"Open - to Permal only","IsActive":true,"SortOrder":2},{"Id":3,"Name":"Closed - hard","IsActive":true,"SortOrder":3},{"Id":104,"Name":"Closed - with wait list","IsActive":true,"SortOrder":4},{"Id":100,"Name":"Closed - but will reopen","IsActive":true,"SortOrder":5},{"Id":21,"Name":"Closed - but replacing redemptions","IsActive":true,"SortOrder":6},{"Id":101,"Name":"Redemptions Gated","IsActive":true,"SortOrder":7},{"Id":102,"Name":"Redemptions Suspended","IsActive":true,"SortOrder":8},{"Id":103,"Name":"In Liquidation","IsActive":true,"SortOrder":9}]},"FundTermsViewModel":null,"LegalFundClassViewModel":null}
子组件
@Output() termDetailsEvent = new EventEmitter<string>();
父组件html
<mgr-fund-classes (termDetailsEvent)="getInvestedDetails($event)" [FundClasses]="FundClasses"></mgr-fund-classes>
推荐答案
tl;dr - 您需要对 data 进行深拷贝以隔离引用两个对象，this.TermDetails 和 this.OriginalList.
tl;dr - You need to do a deep copy of data to isolate the references of the two objects, this.TermDetails and this.OriginalList.
改变这个
this.TermDetails = data;
this.OriginalList = data;
到这里
this.TermDetails = data;
this.OriginalList = JSON.parse(JSON.stringify(data);
说明
在Javascript中，对象是通过引用传递的，所以this.TermDetails和this.OriginalList指向同一个对象.
In Javascript, Objects are passed by reference, so this.TermDetails and this.OriginalList points to the same object.
this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail=> {
funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
.reduce((prev, next) => prev = prev.concat(next), [])
.filter(obj => obj.InvestedAmount !== null);
});
当您改变其中一个嵌套对象(在您的案例中为 this.TermDetails.FundClassViewModel.FundDetailsViewModel 数组)时，更改会反映在两个对象中(该数组在两个对象).
When you mutate one of the nested objects (the this.TermDetails.FundClassViewModel.FundDetailsViewModel array in your case) in one of them, the changes are reflected in both objects (the array is filtered in both objects).
这篇关于在过滤列表和非过滤列表之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
