提问人：Entire-Commercial860 提问时间：11/10/2023 最后编辑：Entire-Commercial860 更新时间：11/16/2023 访问量：55
如何在不使用 *ngIf 的情况下根据条件显示 <mat-tab> 元素？
How can I display a <mat-tab> element depending on a condition without using *ngIf?
问：
我有以下代码：
<mat-tab-group>
<mat-tab [hidden]="!file" label="Example">
Content
</mat-tab>
</mat-tab-group>
我只想显示第一个如果文件存在。我不能在这里使用 *ngIf，因为我仍在访问模板中的引用变量。它不适用于 [hidden]，因为这不是 的属性。
我已经尝试了以下方法。
<mat-tab [ngStyle]="{'display' : file ? 'none' : 'block'}">
适用于 mat-tab-group，但不适用于 mat-tab
2)
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<span [hidden]="!file">Example</span>
</ng-template>
Content
</mat-tab>
</mat-tab-group>
它确保现在仅在文件存在时显示“示例”，但没有标签的选项卡仍然可见。
- 如果我在 mat-tab 中指定了相应的 CSS 类，它就会被忽略。如果我在 @Component 中添加 ViewEncapsulation： None，也会发生这种情况。
答：
0赞
shivansh modawal
11/16/2023
#1
有一个解决方法。 您可以创建一个选项卡数组，并根据文件是否为 true 来推送/弹出选项卡。 代码看起来有点像这样。
<mat-tab-group>
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
Contents for {{tab}} tab
</mat-tab>
</mat-tab-group>在 TS 中，只要满足条件 ！file，只需从已贴花的选项卡数组中弹出选项卡即可。
-PS ：我从 https://v7.material.angular.io/components/tabs/examples 那里得到了这个代码片段。请看示例“具有动态变化选项卡的选项卡组”
评论