Angular - 删除mat-tab

时间:2018-03-06 15:19:15

标签: html angular

我有一个由两个标签组成的表格 基于* ngIf,我决定要显示哪种标签。
- 如果我的表单是一个视图,我想看到两个标签都带有标签(两个标签都有显示用户的信息,第二个标签是结果)。
- 如果我的表单是添加,我希望看不到标签,因此没有标签。

我不想创建两个单独的文件,因为我试图尽可能地减少代码。

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

Example of an empty label

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

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

1 个答案:

答案 0 :(得分:0)

我不确定我是否理解这个问题。当然你可以这样做。正确使用<ng-template>ngIf这样的方式:

<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

希望有所帮助