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:
JavaScript
x
16
16
1
<ng-container matColumnDef="Room">
2
<th mat-header-cell *matHeaderCellDef mat-sort-header> Oda </th>
3
<td mat-cell *matCellDef="let row; let i=index">
4
<span *ngIf="EditIndex != i">{{row.LabAnalysisPicture?.EnvironmentName}}</span>
5
<mat-form-field *ngIf="EditIndex == i">
6
<mat-select required name="Room" [(ngModel)]="row.Room"
7
[compareWith]="compareObjects">
8
<mat-option *ngFor="let prm of environmentListPicture" [value]="prm">
9
{{prm?.EnvironmentName}}
10
</mat-option>
11
</mat-select>
12
</mat-form-field>
13
14
</td>
15
</ng-container>
16
Advertisement
Answer
You just need to filter
your data, and assign to a same variable
Here is the small sample code
HTML
JavaScript
1
10
10
1
<form [formGroup]="testForm">
2
<mat-form-field>
3
<mat-select required formControlName="sampleForm" (selectionChange)="selectType($event.value)">
4
<mat-option *ngFor="let data of sampleData" [value]="data.id">
5
{{data.name}}
6
</mat-option>
7
</mat-select>
8
</mat-form-field>
9
</form>
10
TS
JavaScript
1
18
18
1
export class AppComponent implements OnInit {
2
testForm : FormGroup;
3
sampleData = [
4
{ id: '1' , name: 'test1'},
5
{ id: '2' , name: 'test2'},
6
{ id: '3' , name: 'test3'}];
7
8
constructor(private formBuilder : FormBuilder) { }
9
ngOnInit() {
10
this.testForm = new FormGroup( {
11
'sampleForm':new FormControl(null)
12
});
13
}
14
selectType(e){
15
this.sampleData = this.sampleData.filter(item => item.id !== e);
16
}
17
}
18