我正在尝试过滤出没有投资金额的记录。如果您看到JSON结构,那么我正在尝试过滤FundClassDetailsViewModel对象。我正在将此数据发送到子组件。我需要提供一个切换功能,以便单击复选框将显示已过滤列表,而取消选中该复选框将包含未过滤列表。我创建了一个名为OriginalList的对象,该对象在检索数据时初始化。我将过滤后的列表存储在名为Termdetails的对象中。我可以看到过滤器工作正常。我还创建了一个事件发射器,以从父组件到子组件发出一个名为getInvestedDetails的事件。如果选中此复选框,则将分配名为TermDetails的过滤对象,否则将分配OriginalList。由于某种原因,我看不到包含所有记录的原始列表。我的逻辑怎么了
父组件
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>
答案 0 :(得分:0)
tl; dr -您需要制作data
的深层副本以隔离两个对象this.TermDetails
和this.OriginalList
的引用。>
更改此
this.TermDetails = data;
this.OriginalList = data;
对此
this.TermDetails = data;
this.OriginalList = JSON.parse(JSON.stringify(data);
说明
在Javascript中,对象是通过引用传递的,因此this.TermDetails
和this.OriginalList
指向同一对象。
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
数组)中进行变异时,更改将反映在两个对象中(两个对象中都过滤了数组)。