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

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

我可以理解，因为我在另一个选项卡中更改了 Categories Array 的值。

错误消息不是告诉我有关类别数组的信息，而是告诉我一个名为 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>

您需要查看组件吗？

标签： angularng-bootstrap