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

Question

我有2个下拉作为Facility / Client和Master Plan代码。

1. 现在我选择一个客户端和一个主计划代码。因此，下次当我选择相同的客户端，然后已经选择的主计划代码不应显示在下拉列表中，但必须将其隐藏，并且应向其他客户端显示相同的主计划代码，但所选客户端除外。
2. 当我选择All时，在客户端下拉列表中，我选择的主计划代码不应该显示在其他客户端中，如果我已经选择了具有相同主计划代码的任何其他客户端，那么必须是删除。因此，这里的目的是，相同的客户端代码不应包含相同的主计划代码。

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

但是：ぁzxswい

TS：

DEMO

Answer 1

假设有这些变化，它将按您的需要工作。

  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);
    }
  }

1.对于过滤列表，我在组件方法中附加，selectCitList中的项目选择元素中的过滤选项，其中facilityName =='All'和facilityName与Form中的名称相同：

StackBlitz

在html模板中：

/** 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;
}

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

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