如何删除mat-list-option

Question

所以我有一个动态<mat-selection-list>，我用它来选择基于选择菜单的过滤器。但是，如果我想要返回的记录不适用于这些记录，我也不希望该选项出现。

示例：

猫和狗有中间选择：

但Snakes甚至不应该选中Checkbox：

据我所知，目前我只有*ngIf - <span>该选项仍将保留。他们是否可以完全根据＆＃39;返回记录的价值来删除选项？

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

Answer 1

要在不需要其他html标记时解决此类问题，您可以使用<ng-container></container>。像这样：

<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>

现场演示： https://stackblitz.com/edit/material-selection-list-5-0-0-cloop8?file=app/app.component.html

附注：在正确的html中，此*ngIf='filter.value === "filter1"'应为*ngIf="filter.value === 'filter1'"（其他* ngIf的注释相同）

Answer 2

你可以这样做：

<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>

Answer 3

线索可能是使用另一个类：

<强> 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