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