En mi código, tengo un campo de entrada en forma de menú desplegable. El menú desplegable tiene 5 opciones (vacío, 1, 2, 3, 4). Las opciones 1, 2, 3 y 4 provienen de la base de datos y en la interfaz de usuario, quiero establecer el valor de entrada en 0 cuando elijo la opción vacía. Aquí está mi código y una captura de pantalla. ¿Qué debo hacer para establecer ese campo vacío como 0?
HTML:
<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p"> <mat-label>Dönem Hafta</mat-label> <mat-select formControlName="PlanWeek"> <mat-option *ngFor="let week of weekList" [value]="week.Id"> {{week.Name}} </mat-option> </mat-select> </mat-form-field>TS:
_productionService.onWeekListChanged.subscribe( (response: IBasicModel[]) => { this.weekList = response; } );puede crear un elemento de opción y simplemente vincularlo a 0. La otra opción es iterar y vincular valores de la base de datos.
<mat-option value="0"></mat-option> <mat-option *ngFor="let item of items" [value]="item.id">{{item.name}}</mat-option> <mat-option [value]="null">''</mat-option>Para obtener más ejemplos, consulte la documentación de material angular.
Así es como puede definir una opción predeterminada en Mat-Select:
<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p"> <mat-label>Dönem Hafta</mat-label> <mat-select formControlName="PlanWeek"> <mat-option [value]="0">default</mat-option> <mat-option *ngFor="let week of weekList" [value]="week.Id"> {{week.Name}} </mat-option> </mat-select> </mat-form-field>