Angular removing selected options from a combobox with *ngFor

user_13614356 0
Viewed 44

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?

HTML:

<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"
                                        [compareWith]="compareObjects">
                                            <mat-option *ngFor="let prm of environmentListPicture" [value]="prm">
                                                {{prm?.EnvironmentName}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                    
                                </td>
                            </ng-container>
angular typescript html javascript
1 Answers

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

HTML

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

TS

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)
    });
  }
  selectType(e){
    this.sampleData = this.sampleData.filter(item => item.id !== e);
  }
}
user_11890700
Related