Скрыть выбранный вариант из другого раскрывающегося списка, если несколько раскрывающихся списков связаны с одним и тем же источником данных - PullRequest
1 голос
/ 12 июля 2020

Мне нужно создать несколько mat-select внутри *ngFor и связать его с тем же источником данных. Мое требование состоит в том, что если вариант выбран из любого раскрывающегося списка, он не должен присутствовать в остальных раскрывающихся списках. У меня есть такой код.

<div *ngFor="let investment of data.priorInvestmentExperiences; let i=index;">
  <mat-form-field appearance=" outline " class="mat-type">
    <mat-label><strong> Investment Type </strong> </mat-label>
    <mat-select
      [(value)]="investment.productTypeCode"
      (click)="click($event)"
      (selectionChange)="selectionChange($event, i)"
    >
      <mat-option *ngFor="let type of  getSerialNumbers(i)" [value]="type.code">
        {{type.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

и в файле ts ...

export class SelectOverviewExample {
  InvestmentTypes = [
    {
      code: 1,
      name: "invesmentType1",
    },
    {
      code: 2,
      name: "invesmentType2",
    },
    {
      code: 3,
      name: "invesmentType3",
    },
    {
      code: 4,
      name: "invesmentType4",
    },
  ];
  data = {
    priorInvestmentExperiences: [
      {
        productTypeCode: 1,
      },
      {
        productTypeCode: 2,
      },
      {
        productTypeCode: 3,
      },
      {
        productTypeCode: 4,
      },
    ],
  };
  arrSelection: Array<KeyValuePair> = new Array<KeyValuePair>();
  ischanged = false;
  click(event) {
    return false;
  }
  selectionChange(event, itemIndex) {
    const selectedVal = event.value;
    let cc: KeyValuePair = {
      key: selectedVal,
      value: itemIndex,
    };
    this.arrSelection.push(cc);
    this.ischanged = true;
  }

  getData(itemIndex) {
    const filteredList = this.InvestmentTypes;

    if (
      this.arrSelection.length > 0 &&
      this.arrSelection.filter((x) => x.value === itemIndex).length >= 0
    ) {
      this.InvestmentTypes.forEach((sn) => {
        if (this.arrSelection[sn.code] !== itemIndex) {
          filteredList.push(sn);
        }
      });
    } else {
    }
    return filteredList;
  }
}

export interface KeyValuePair {
  key: any;
  value: any;
}

Но застрял в getData(). Мне нужно изменить источник данных параметров мата при изменении выбора мата, но после изменения данных он застрял в методе getData. Любые предложения, пожалуйста.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...