спрятать несколько мат-вариантов углового исполнения

Question

Я вижу, что это свойство скрыто, Но когда я пробую его свойство, оно не работает

<mat-option 
  *ngFor="let item of itemlist" 
  [value]="item.Name" 
  [hidden]="true">
  <span>{{ item.Name }}</span>
</mat-option>

Но выше не прячется.

Что я могу сделать, чтобы скрыть это, мне нужно скрыть несколько опций в зависимости от условия

Пожалуйста, сообщите.

Спасибо

Answer 1

Просто используйте [ngStyle] с вашим условием и установите для свойства display значение block или none соответственно.

Например:

<mat-option 
  *ngFor="let item of itemlist; let i = index;" 
  [value]="item.Name" 
  [ngStyle]="{ display : i % 2 === 0 ? 'none' : 'block' }"
  <span>{{ item.Name }}</span>
</mat-option>

Вот Образец StackBlitz для вашей ссылки.

Answer 2

Вы можете использовать ng-container и ngIf или отфильтровать список элементов в ваших component.ts перед отображением значений

<ng-container *ngFor="let item of itemlist">
 <mat-option *ngIf="item.hidden === false" [value]="item.Name">
   <span>{{ item.Name }}</span>
 </mat-option>
</ng-container>