es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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;
    });
  }
}
Tags:  , , , ,

Answer

  1. Avatar for 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:

    <td>
      <mat-select placeholder="Tipo trámite" name="tipoTramite" [(ngmodel)]="tipoTramiteValue" (change)="onChange(tipoTramiteValue)">
        <mat-option *ngfor="let tipoTramite of listTiposNovedad" [ngif]="tipoTramite.nombreParametro !== 'TERMINACIÓN ANTICIPADA' && tipoTramite.nombreParametro !== 'PRÓRROGA' && tipoTramite.nombreParametro !== 'SUSPENSIÓN'" [value]="tipoTramite.nombreParametro">{{tipoTramite.nombreParametro}}</mat-option>
      </mat-select>
    </td>
    

    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!

Comments are closed.