Мне нужно создать несколько 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
. Любые предложения, пожалуйста.