Question

我有2个下拉列表，分别是设施/客户和总体规划代码。

现在，我选择一个客户和一个主计划代码。因此，下一次当我选择相同的客户时，已经选择的总体计划代码不应显示在下拉列表中，而必须将其隐藏，并且应向其他客户显示相同的总体计划代码，但所选客户除外
当我选择“全部”时，在“客户端”下拉列表中，我选择的那个主计划代码不应在其他客户端中显示，如果我已经选择了具有相同主计划的其他任何客户端，代码，则必须将其删除。因此，这里的目的是，相同的客户代码不应包含相同的总体规划代码。

在添加到列表之前，请帮助我过滤对象数组。

演示：DEMO

Ts：

  addPlanCode() {
    let planCodeData = this.planCodeMappingFormBuilder.value;
    const jsonObj = {
    //  FieldValue: this.facilityId,
      IsPayerOffice: 1,
      planCodeExtensionID: 0,
      facilityCode: planCodeData.FacilityCode == "" ? null : planCodeData.FacilityCode,
      facilityName: planCodeData.FacilityCode == "*" ? "All" : this.facilities.filter(x=>x.facilityCode == planCodeData.FacilityCode)[0].facilityName,
      planCode: planCodeData.PlanCode,
      FieldType: "PO",
    };
    this.planCodeList.push(jsonObj);
  }


  public clear() {
    this.planCodeMappingFormBuilder = this.formbuilder.group({
      'FieldValue': [''],
      'FacilityCode': ['', Validators.required],
      'PlanCode': ['', Validators.required],
      'planCodeExtensionID': ['']
    })
  }


  deletePlanCode(planCodeList, index: any) {
    this.planCodeList.splice(index, 1);
    if (planCodeList.planCode) {
      this.deletedPlanCodeList.push(planCodeList);
    }
  }

Answer 1

假设进行此更改，它将按您的需要工作。 StackBlitz

1.对于我在组件方法中附加的过滤列表，通过 planCodeList 中具有 facilityName =='All'和 facilityName 的项目在select元素中添加该过滤选项>与表单中的名称相同：

/** Returns the filtered Master Plan Code list for select element */
getFilteredPlans() {
  let formValue = this.planCodeMappingFormBuilder.value;
  let sameCodes = this.planCodeList.filter(x => x.facilityCode == formValue.FacilityCode);
  let allCodes = this.planCodeList.filter(x => x.facilityName == 'All');
  if (sameCodes.length > 0 || allCodes.length > 0) {
    let samePlanCodes = sameCodes.map(x => x.planCode);
    let sameAllCodes = allCodes.map(x => x.planCode);
    let filtered = this.planCode.filter(x => samePlanCodes.findIndex(y => y == x.planCode) < 0);
    filtered = filtered.filter(x => sameAllCodes.findIndex(y => y == x.planCode) < 0);
    return filtered; 
  }
  else 
    return this.planCode;
}

在html模板中：

 <option *ngFor="let planCode of getFilteredPlans()" [value]="planCode.planCode">{{planCode.defaultPayerName}}{{" "}}({{planCode.planCode}})</option>

要在使用“全部”功能添加代码时删除项目，我会更新方法 addPlanCode ：

addPlanCode() {
    let planCodeData = this.planCodeMappingFormBuilder.value;
    const code = {
      //  FieldValue: this.facilityId,
        IsPayerOffice: 1,
        planCodeExtensionID: 0,
        facilityCode: planCodeData.FacilityCode == "" ? null : planCodeData.FacilityCode,
        facilityName: planCodeData.FacilityCode == "*" ? "All" : this.facilities.find(x=> x.facilityCode == planCodeData.FacilityCode).facilityName,
        planCode: planCodeData.PlanCode,
        FieldType: "PO",
    };
    if (planCodeData.FacilityCode == "*") {
      for (let i = this.planCodeList.length - 1; i >= 0; i--) {
        if (this.planCodeList[i].planCode == planCodeData.PlanCode)
          this.planCodeList.splice(i, 1);
      }
    }
    this.planCodeList.push(code);
    this.planCodeMappingFormBuilder.reset();
  }

如何使用angular2根据列表中的选定对象过滤内容

1 个答案: