Angular 7在@Input属性中保留原始列表

我已经实现了一个复选框，并通过服务捕获它的事件。我基本上是尝试根据复选框选择过滤数组，然后过滤数组。在组件代码中，我当前有两个属性。如果您看到下面我将下拉列表绑定到 LegalFundClasses属性，从输入属性FundClasses属性读取值。第一次加载表单时，我可以看到未筛选的列表。当复选框为true时，列表将被过滤，但我将失去原始的过滤列表。我已经共享了组件代码 我正在做过滤的地方。如何维护原始列表

组成部分

    public get FundClasses(): any {
        return this._fundClasses;
    }
    @Input()
    public set FundClasses(value: any) {
        this._fundClasses = value;
    }

    get LegalFundClasses(): any {
        if (this.FundClasses) {
        return this.FundClasses.LegalFundClasses;
        }
    }

    set LegalFundClasses(value: any) {
        this.FundClasses.LegalFundClasses = value;
    }

  openFundClassModal() {
        if (this.addFundClassComponent != null) {
            this.fundClassWindowOpened = true;
            if (this.termsStateService.IsInvested) {
                this.LegalFundClasses = this.LegalFundClasses.filter(x=> x.InvestedStatusId !== 0);
            } 
        }
    }

html

请更改

@Input()
    public set FundClasses(value: any) {
        this._fundClasses = value;
    }

到

---

因为set prefix意味着父组件对输入变量的任何更改都将在更改发生时设置，并且可能会更改列表项。没有它，FundClass只能设置一次。另外，请尽量不要再次将过滤后的值分配给变量

首先，您需要保留两个单独的列表，以实现您的目标。 设置LegalfundClass时，它也会设置原始列表

@Input('FundClasses') fundClasses: any; // original data
legalFundClasses: any; // use it filtered data to show.
  openFundClassModal() {
        if (this.addFundClassComponent != null) {
            this.fundClassWindowOpened = true;
            if (this.termsStateService.IsInvested) {
                this.legalFundClasses = this.fundClasses.filter(x=> x.InvestedStatusId !== 0);
            } 
        }
    }

---

你确定要从这个.FundClasses获得LegalfundClass吗。因为您正在为此设置输入。\u fundClasses。我不明白你的困惑。FundClasses是一个输入元素，由其父元素设置。LegalFundClasses有一个从父组件已经设置的FundClasses读取的get。Tom，我知道，我会建议在答案部分进行编辑，请尝试一下，为什么你不简单地添加一个新的类成员

filteredList

，它会在过滤器选项或源列表更改时设置？嗨，佐塔，你能给我举个例子吗？如果我没有设置LegalFundClasses属性，我将如何显示过滤列表？另外一件需要注意的是FundClasses数组将随时间增加，因此组件应该知道何时添加新元素，在这种情况下，请忽略我提到的更改。但您仍然试图从FundClasses变量中获取LegalfundClass，这是不可取的。相反，请尝试从此处检索。\u

 @Input() FundClasses: any

@Input('FundClasses') fundClasses: any; // original data
legalFundClasses: any; // use it filtered data to show.
  openFundClassModal() {
        if (this.addFundClassComponent != null) {
            this.fundClassWindowOpened = true;
            if (this.termsStateService.IsInvested) {
                this.legalFundClasses = this.fundClasses.filter(x=> x.InvestedStatusId !== 0);
            } 
        }
    }