Tengo un <mat-selection-list> dinámico que estoy usando para seleccionar filtros en función de un menú de selección, pero no quiero que aparezca la opción si los registros que quiero devolver no se aplican.

Ejemplos:

Los gatos tienen la opción intermedia disponible:
Los gatos tienen la opción intermedia disponible

Pero cuando elegimos Serpientes no deberíamos tener la casilla de verificación como una opción:
Pero las serpientes ni siquiera deberían tener la casilla de verificación como una opción

Entiendo que actualmente solo estoy *ngIf - con el <span> la opción permanecerá. ¿Es su forma de eliminar la opción completamente basada en el valor de los 'Registros de devolución en'?

code ex: https://stackblitz.com/edit/material-selection-list-5-0-0-qhyxd5?file=app%2Fapp.component.html

0
vonstriker 27 feb. 2018 a las 22:53

3 respuestas

La mejor respuesta

Para resolver este tipo de problema cuando no necesita una etiqueta html adicional, puede aprovechar <ng-container></container>. Algo como esto :

<mat-selection-list #list [(ngModel)]="selectedOptions">
  <ng-container *ngFor="let filter of filterOptions">
    <mat-list-option *ngIf='filter.value === "filter1"'
                     [value]="filter.value"
                     [selected]='filter.selected'>
      <span >
        Maximum number of records to return
      </span>
    </mat-list-option>
    <mat-list-option *ngIf='filter.value === "filter2" && ((returnRecordsIn === "Dogs") || (returnRecordsIn === "Cats"))'
                     [value]="filter.value"
                     [selected]='filter.selected'>
      <span>
        {{returnRecordsIn === 'Dogs' ? 'Minimum' : 'Maximum'}} number of breeds
      </span>
    </mat-list-option>
    <mat-list-option *ngIf='filter.value === "filter3"'
                     [value]="filter.value"
                     [selected]='filter.selected'>
      <span >
        Return random selection of {{returnRecordsIn}}
      </span>
    </mat-list-option>
    </ng-container>
</mat-selection-list>

Demo en vivo : https: // stackblitz.com/edit/material-selection-list-5-0-0-cloop8?file=app/app.component.html

Nota al margen: en html correcto, este *ngIf='filter.value === "filter1"' debe ser *ngIf="filter.value === 'filter1'" (el mismo comentario para el otro * ngIf)

1
mickdev 27 feb. 2018 a las 20:39

La pista podría ser usar una clase adicional:

HTML

<mat-list-option [class.toto]='filter.value === "filter2" && !((returnRecordsIn === "Dogs") || (returnRecordsIn === "Cats"))'
 *ngFor="let filter of filterOptions" [value]="filter.value" [selected]='filter.selected'>

CSS

  ::ng-deep .mat-list-item.toto{
      display:none !important;
  }

Demo

0
Vega 27 feb. 2018 a las 20:59

Usted puede hacer:

<mat-selection-list #list [(ngModel)]="selectedOptions">
    <ng-container *ngFor="let filter of filterOptions">
        <mat-list-option 
            *ngIf="!(filter.value === 'filter2' && returnRecordsIn === 'Snakes')"
            [value]="filter.value" 
            [selected]='filter.selected'>
            <span *ngIf='filter.value === "filter1"'>
                Maximum number of records to return
            </span>
            <span *ngIf='filter.value === "filter2" && returnRecordsIn !== "Snakes"'>
                {{returnRecordsIn === 'Dogs' ? 'Minimum' : 'Maximum'}} number of breeds
            </span>
            <span *ngIf='filter.value === "filter3"'>
                Return random selection of {{returnRecordsIn}}
            </span>
        </mat-list-option>
    </ng-container>
</mat-selection-list>
0
julianobrasil 27 feb. 2018 a las 20:48