如何在不使用 *ngIf 的情况下根据条件显示 <mat-tab> 元素？

Question

我有以下代码：

<mat-tab-group>
<mat-tab [hidden]="!file" label="Example">
Content
 </mat-tab>
</mat-tab-group>

我只想显示第一个（如果文件存在）。我无法在这里使用 *ngIf，因为我仍在访问模板中的引用变量。它不适用于 [hidden]，因为这不是 .

的属性

我已经尝试过以下方法。

1. <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>

它确保现在仅在文件存在时才显示“示例”，但没有标签的选项卡仍然可见。

3. 如果我在 mat-tab 中指定相应的 CSS 类，它就会被忽略。如果我在 @Component 中添加 ViewEncapsulation: None 也会发生这种情况。

Answer 1

您不能创建一个布尔变量，在 OnInit 中将其设置为 true（如果文件存在），然后将其用作 *ngIf 的 HTML 模板中的条件吗？