Question

我使用ng-boostrap在Angular 6中显示标签。

我有2个标签，“类别”和“类别设置”。

在“类别”中，我可以添加或删除类别。在CategoriesSettings中，我可以配置每个类别。

这是如果我添加/删除类别，然后转到CategoriesSettings，则会出现错误：

NgbTabset.html:4 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'active: false'. Current value: 'active: true'.

我能理解，因为我在另一个选项卡中更改了类别数组的值。

错误消息不是告诉我有关类别数组的信息，而是关于一个称为active的布尔值的信息，它使我能够记住active选项卡。

此外，每个标签都是不同的组件。

我应该怎么做？

以下是一些代码：

<ngb-tabset type="pills" class="nav-fill" #tabs [activeId]="selectedTab" >
    <ngb-tab id="categories">
        <ng-template ngbTabTitle>{{ 'model.categories' | translate | uppercase }}</ng-template>
        <ng-template ngbTabContent>
        <div class="card mt-3">
            <div class="card-body">
            <form (ngSubmit)="onSubmitCategories()">
                <app-tournament-edit-categories
                [(ngModel)]="data.tournament" name="tournament"
                [tournament]="data.tournament"
                [categories]="data.categories">
                </app-tournament-edit-categories>
                <div align="right">
                <button type="submit" class="btn btn-success">
                    {{ 'common.save' | translate }}
                </button>
                </div>

            </form>
            </div>
        </div>
        </ng-template>
    </ngb-tab>
    <ngb-tab id="category-settings">
        <ng-template ngbTabTitle>{{ 'model.categorySettings' | translate | uppercase }}</ng-template>
        <ng-template ngbTabContent>
        <div class="card mt-3">
            <div class="card-body">
            <!--TODO When clicked, must refresh the page, as it could be changed with edit categories page-->
            <app-tournament-edit-category-settings
                *ngFor="let championship of data.tournament.championships; index as i"
                [championship]="championship"
                [i]="i"
            >
            </app-tournament-edit-category-settings>
            </div>
        </div>
        </ng-template>
    </ngb-tab>
</ng-tabset>

您需要查看组件吗？

如何使用Angular 6刷新依赖于ng-tabs

0 个答案: