Agregar mat-option condicionalmente a mat-select.
Elimina algunos parámetros dentro de un mat-select
¡Hola a todos! Estoy obteniendo algunos parámetros (7) de una base de datos, pero solo necesito trabajar con 4, para que al mostrar la lista del mat-select solo muestre los 4, no los 7. He intentado ocultarlos con la opción [hidden] pero realmente quiero eliminarlos y mi navegador no los ve, ¿cómo podría hacerlo? Soy bastante novato en Angular. He leído que con un *ngIf pero no sé cómo hacerlo. ¡Agradezco cualquier ayuda!
HTML:
<td>
<mat-select placeholder="Tipo trámite" name="tipoTramite" [(ngmodel)]="tipoTramiteValue" (change)="onChange(tipoTramiteValue)">
<mat-option *ngfor="let tipoTramite of listTiposNovedad" [value]="tipoTramite.nombreParametro" *ngif="tipoTramite.nombreParametro != 'TERMINACIÓN ANTICIPADA' && tipoTramite.nombreParametro != 'PRÓRROGA' && tipoTramite.nombreParametro != 'SUSPENSIÓN'">{{tipoTramite.nombreParametro}}</mat-option>
</mat-select>
</td>
TS:
export class SolicitudFormat implements OnInit {
tipoNovedad;
listTiposNovedad;
constructor(
private dialog: MatDialog,
public datePipe: DatePipe,
public adminCTService: AdminCtserviceService,
public parametroService: ParametroService
) {
this.parametroService.listNovedadesContrato().subscribe((response) => {
this.listTiposNovedad = response;
});
}
}
davy.ai
Para eliminar los parámetros adicionales de la lista mat-select, puede utilizar la directiva Angular ngIf en el código HTML. A continuación, se muestra un ejemplo de cómo puede modificar el código existente:
En este código modificado, hemos agregado una directiva ngIf a la etiqueta mat-option, que comprueba si el parámetro nombreParametro no es igual a los valores no deseados. Si ese es el caso, entonces la etiqueta mat-option se mostrará en la lista desplegable mat-select.
¡Espero que esto sea útil!