Javascript 在筛选列表和非筛选列表之间切换_Javascript_Angular_Typescript_Pass By Reference

Javascript 在筛选列表和非筛选列表之间切换

javascript angular typescript

Javascript 在筛选列表和非筛选列表之间切换,javascript,angular,typescript,pass-by-reference,Javascript,Angular,Typescript,Pass By Reference,我试图过滤掉没有投资金额的记录。如果您看到JSON结构，我将尝试过滤FundClassDetailsViewModel对象。我正在将此数据发送到子组件。我需要提供一个切换功能，这样点击复选框将显示过滤列表，取消选中复选框将包含非过滤列表。我创建了一个名为OriginalList的对象，它在检索数据时初始化。我将过滤后的列表存储在名为Termdetails的对象中。我可以看出过滤器工作正常。我还创建了一个eventemitter，以从父组件向子组件发出一个名为getInvestedDetails的

我试图过滤掉没有投资金额的记录。如果您看到JSON结构，我将尝试过滤FundClassDetailsViewModel对象。我正在将此数据发送到子组件。我需要提供一个切换功能，这样点击复选框将显示过滤列表，取消选中复选框将包含非过滤列表。我创建了一个名为OriginalList的对象，它在检索数据时初始化。我将过滤后的列表存储在名为Termdetails的对象中。我可以看出过滤器工作正常。我还创建了一个eventemitter，以从父组件向子组件发出一个名为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>();

@Output（）termDetailsEvent=neweventEmitter（）；

父组件html

<mgr-fund-classes (termDetailsEvent)="getInvestedDetails($event)" [FundClasses]="FundClasses"></mgr-fund-classes>

tl；dr-您需要对

数据进行深度复制

以隔离两个对象的引用，

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

数组）中变异一个时，更改会反映在两个对象中（数组在两个对象中都被过滤）。