[Fixed] Angular removing selected options from a combobox with *ngFor


I am trying to write a code where a user adds a row to a tab, then selects an option from a combobox and enters a description for it. Once that description is entered, I don’t want that option to appear in the combobox for the next row. How can I do that while using *ngFor?


<ng-container matColumnDef="Room">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header> Oda </th>
                                <td mat-cell *matCellDef="let row; let i=index">
                                    <span *ngIf="EditIndex != i">{{row.LabAnalysisPicture?.EnvironmentName}}</span>
                                    <mat-form-field *ngIf="EditIndex == i">
                                        <mat-select required name="Room" [(ngModel)]="row.Room"
                                            <mat-option *ngFor="let prm of environmentListPicture" [value]="prm">


You just need to filter your data, and assign to a same variable
Here is the small sample code


<form [formGroup]="testForm">
        <mat-select required formControlName="sampleForm" (selectionChange)="selectType($event.value)">
            <mat-option *ngFor="let data of sampleData" [value]="data.id">


export class AppComponent implements OnInit  {
  testForm : FormGroup;
  sampleData = [
    { id: '1' , name: 'test1'}, 
    { id: '2' , name: 'test2'}, 
    { id: '3' , name: 'test3'}];

  constructor(private formBuilder : FormBuilder) { }
  ngOnInit() {
    this.testForm = new FormGroup( {
      'sampleForm':new FormControl(null)
    this.sampleData = this.sampleData.filter(item => item.id !== e);

Leave a Reply

(*) Required, Your email will not be published