Angular - 删除 mat-tab 中的标签

Question

我有一个由两个选项卡组成的表单。
根据 *ngIf，我决定要显示什么样的选项卡。
- 如果我的表单是视图，我希望看到两个带有标签的选项卡（两个选项卡都有向用户显示的信息，第二个选项卡是结果）。
- 如果我的表单是一个添加，我不想看到任何标签，因此没有标签。

我不愿意创建两个单独的文件，因为我试图尽可能减少我的代码。

我尝试添加一个替换 mat-tab-label 的 ng-template，但我的标签是空的，而不是删除它。

到目前为止，这就是我所拥有的。我的问题是：是否可以在不创建新文件的情况下删除整个标签标签，如果可以，我该怎么做？

<mat-dialog-content class="ManageTask">
<form [formGroup]="form">
    <mat-tab-group mat-stretch-tabs>
        <mat-tab>
            <ng-template *ngIf="isView()" mat-tab-label>Task details</ng-template>
            <div class="left">
                <mat-form-field class="full-width">
                    <input matInput type="text" placeholder="Name" formControlName="name">
                    <mat-error *ngIf="form.controls['name'].hasError('required')">Name required</mat-error>
                </mat-form-field>
                <br/>
                <mat-form-field class="full-width">
                    <textarea matInput type="text" placeholder="Description" formControlName="description"></textarea>
                    <mat-error *ngIf="form.controls['description'].hasError('required')">Description required</mat-error>
                </mat-form-field>
            </div>
        </mat-tab>
        <mat-tab *ngIf="isView()" label="Task results">
            <div>...MORE CONTENT...</div>
        </mat-tab>
    </mat-tab-group>
</form>

Answer 1

我不确定我是否理解这个问题。当然你可以做到。像这样使用<ng-template>andngIf 的正确方法是：

<ng-template [ngIf]="isView()">
    <mat-tab label="Task details">...</mat-tab>
</ng-template>

或：

<mat-tab *ngIf="isView()" label="Task details">...</mat-tab>

[ngif] 和 *ngif:Angular Structural Directives 之间的区别

希望对你有帮助