Question

我创建了一个通过单击按钮过滤对象的函数，在组件级别上一切正常。但是，当我过滤对象然后转到下一步然后返回时，我无法取消过滤数据。我正在处理服务对象。

以下是示例代码：

这是父组件的二传手：

def today = Calendar.getInstance();
today.set(Calendar.HOUR_OF_DAY, 0);
today.set(Calendar.MINUTE, 0);
today.set(Calendar.SECOND, 0);
today.set(Calendar.MILLISECOND, 0);
today.add(Calendar.YEAR, 1);
def nextYear = today.getTime();
def nextYear_formatted = new java.text.SimpleDateFormat("yyyy-MM-dd").format(nextYear);
testRunner.testCase.setPropertyValue( "nextYear", nextYear_formatted )

在该组件中，我像这样过滤数据：

@Input()
  public set application(newApplication: Application) {
    this.applicationData = newApplication;
    if (newApplication) {
      this.policy = newApplication.pricingPolicy;
      this.originalPriceConfig = {...this.policy.pricingPolicyConfig.groupConfig};
      this.filteredPriceConfig = {...this.policy.pricingPolicyConfig.groupConfig};
      this.isRenew = !!(this.policy && this.policy.referenceId);
      this.referenceFrom = this.policy && this.isRenew ? this.policy.referenceFrom : null;
      this.referenceTo = this.policy && this.isRenew ? this.policy.referenceTo : null;
      this.dateFrom = this.policy && this.policy.from ? this.policy.from : null;
      this.dateTo = this.policy && this.policy.to ? this.policy.to : null;
      this.promotionalFrom = this.policy && this.policy.promotionFrom ? this.policy.promotionFrom : null;
      this.promotionalTo = this.policy && this.policy.promotionTo ? this.policy.promotionTo : null;
    }
  }

当我从其他组件返回到该组件时，如何获取未过滤的数据？

感谢您的回复。

Answer 1

您必须清除所选属性...在组件的ngOnInit上将其设置为null或为空。

Answer 2

您正在覆盖过滤器部分中的现有对象this.policy.pricingPolicyConfig。您必须保持原始数据不变。

您可以在输入部分保留applicationData的克隆。查看评论区域

let originalApplicationData; //add new instance variable.
@Input()
  public set application(newApplication: Application) {
    this.applicationData = newApplication;
    this.originalApplicationData = JSON.parse(JSON.stringif(newApplication)); //deep cloning the object
    this.originalApplicationData.
    this.applyFilter(newApplication);
    this.originalApplicationData.policy.pricingPolicyConfig.groupConfig = this.applicationData.policy.pricingPolicyConfig.groupConfig;
  }

将过滤器代码分成单独的方法

  applyFilter(newApplication){
       if (newApplication) {
          this.policy = newApplication.pricingPolicy;
          this.originalPriceConfig = {...this.policy.pricingPolicyConfig.groupConfig};
          this.filteredPriceConfig = {...this.policy.pricingPolicyConfig.groupConfig};
          this.isRenew = !!(this.policy && this.policy.referenceId);
          this.referenceFrom = this.policy && this.isRenew ? this.policy.referenceFrom : null;
          this.referenceTo = this.policy && this.isRenew ? this.policy.referenceTo : null;
          this.dateFrom = this.policy && this.policy.from ? this.policy.from : null;
          this.dateTo = this.policy && this.policy.to ? this.policy.to : null;
          this.promotionalFrom = this.policy && this.policy.promotionFrom ? this.policy.promotionFrom : null;
          this.promotionalTo = this.policy && this.policy.promotionTo ? this.policy.promotionTo : null;
        }
}

在“返回”按钮单击时调用此方法

restoreState(){
    this.applyFilter(this.originalApplicationData);
}

Answer 3

问题在于您不是在originalPriceConfig方法中使用filteredPriceConfig，而是使用filterTableByChoosenProperty，因此每次切换时都会覆盖该值，请尝试以下操作：

private filterTableByChoosenProperty(): void {
    const sub: Subscription = this.pricingService.setChoosenProducts.subscribe((toggle: boolean) => {
      this.policy.pricingPolicyConfig.groupConfig = {...this.originalPriceConfig};
      if (toggle) {
        this.filteredPriceConfig = {...this.filterGroupByField('priceConfig', this.policy.pricingPolicyConfig, this.is(this.chosen()))};
                                                                              ^
        this.filteredPriceConfig = {...this.filterGroupByField('subGroup', this.policy.pricingPolicyConfig, (item) => this.checkIfPriceConfigHasElements(item.priceConfig) || this.checkIfGroupArrayHasElements(item.subGroup))};
                                                                           ^
        this.policy.pricingPolicyConfig.groupConfig = {...this.filteredPriceConfig};
      }
      this.changeDetection.detectChanges();
    });
    this.subscriptions.push(sub);
  }

在Angular 5中过滤数据

3 个答案: