隐藏一些垫子选项答案

【问题标题】：hide few mat-options angular materialize隐藏一些垫子选项
【发布时间】：2018-10-30 13:08:52
【问题描述】：

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

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

但上面没有隐藏。

我该怎么做才能隐藏它，我需要根据条件隐藏几个选项

请指教。

谢谢

【问题讨论】：

我在mat-select 文档中找不到任何此类内容。
您通常不会隐藏选项，而是通过过滤将它们从选项列表中排除。在视觉上隐藏它们有点像作弊。您应该从“itemList”中删除要隐藏的项目。请参阅 Jorge 的 answer below。

标签： angular angular-material materialize

【解决方案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>

这里有一个Sample StackBlitz 供您参考。

【讨论】：

谢谢，我一直在找这个指令，因为我是新手所以想不到这个

【解决方案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>

【讨论】：

但它会隐藏 span 而不是 mat 选项
如果这个列表我可以隐藏，我想要它作为 mat-option
啊，对不起，你应该在你的component.ts中过滤itemlist，然后显示mat-option