隐藏一些垫子选项以实现角度

Question

我可以看到有隐藏的财产， 但是当我尝试使用它的属性时，它不起作用

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

但是上面没有隐藏。

该如何隐藏它，我需要根据情况隐藏一些选项

请告知。

谢谢

Answer 1

您可以在显示值之前使用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>

Answer 2

只需根据情况使用[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>

这是您推荐的Sample StackBlitz。