如何刪除 `mat-list-option`

Question

我有一個動態的<mat-selection-list>用於根據選擇菜單選擇過濾器，但如果我要返回的記錄不適用，我不希望出現該選項。

例子：

貓有中間選項可用：

但是當我們選擇 Snakes 時，我們不應該將 Checkbox 作為選項：

我知道目前我只是*ngIf -ing <span>該選項將保留。 他們是完全根據“返回記錄”的值來刪除選項的方法嗎？

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

線索可能是使用一個額外的類：

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

演示

Answer 3

你可以做：

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