Mi aplicación permite al usuario cargar archivos en una base de datos, también tengo un componente mat-select donde el usuario puede seleccionar qué hoja de cálculo de Excel le gustaría cargar.
Me gustaría ocultar este componente mat-select SI el usuario selecciona un archivo CSV, sin embargo, mi [hidden]="hideDropdown" no parece funcionar.
hideDropdown: boolean; if (this.file.type == "text/csv") { this.hideDropdown = true; } else { this.hideDropdown = false; } <mat-form-field *ngIf="sourceFile" id="worksheetStyle" appearance="fill"> <mat-label>Excel Worksheet</mat-label> <mat-select [hidden]="hideDropdown" [(ngModel)]="selectedSheet" (selectionChange)="selectWorksheet()"> <mat-option *ngFor="let worksheet of worksheetNames" [value]="worksheet"> {{worksheet}} </mat-option> </mat-select> </mat-form-field>Creo que la razón por la que el atributo [oculto] no funciona es porque no existe en mat-select solo en etiquetas html, ya que es un atributo html central. Lo que podría hacer en su lugar es usar *ngIf de la siguiente manera:
<mat-select *ngIf="hideDropDown" [(ngModel)]="selectedSheet" (selectionChange)="selectWorksheet()"> <mat-option *ngFor="let worksheet of worksheetNames" [value]="worksheet"> {{worksheet}} </mat-option> </mat-select>Sin embargo, debe tenerse en cuenta que * ngIf eliminará la selección del DOM por completo, mientras que [hidden] solo aplica una visualización: ninguno al elemento, por lo que aún se representará en el DOM. Entonces, si ha creado un formulario reactivo que espera tener una entrada de selección, causará un error si lo elimina con ngIf. Sin embargo, parece que solo está usando la selección por sí misma y con un ngModel, por lo que no debería ser un problema para usted.
Edición 1:
Stackblitz de trabajo que muestra una posible solución: https://stackblitz.com/edit/angular-5ykmue?file=src/app/select-overview-example.html
Edición 2:
Estoy corregido por no poder usar el atributo [oculto], si envuelve el campo de formulario en un div, puede usar oculto para mostrar/ocultar de la siguiente manera:
<div [hidden]="hideDropdown"> <mat-form-field *ngIf="sourceFile" id="worksheetStyle" appearance="fill"> <mat-label>Excel Worksheet</mat-label> <mat-select [(ngModel)]="selectedSheet" (selectionChange)="selectWorksheet()"> <mat-option *ngFor="let worksheet of worksheetNames" [value]="worksheet"> {{worksheet}} </mat-option> </mat-select> </mat-form-field> </div>