隐藏几个垫子选项 angular 实现

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 供您参考。

隐藏几个垫子选项 angular 实现

hide few mat-options angular materialize

materialize

angular-material

angular