angular - 仅当处于事件状态时如何显示 Material 选项卡内容？

Question

我尝试仅在选择时显示选项卡内容:

        <mat-tab label="contacts">
            <p-contacts [contacts]="selectedPanel.contacts"
                        *ngIf="tabGroup.selectedIndex === 1">
            </p-contacts>
        </mat-tab>

这是工作，但我得到了 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.那我做错了什么？

demo

Answer 1

您可以 lazily load the tabs'内容通过将内容放入 ng-template与 matTabContent属性是这样的:

<mat-tab-group  #tabGroup>
  <mat-tab  label="Firt">
    <ng-template matTabContent>
      Content 1
    </ng-template>
  </mat-tab>
  <mat-tab  label="Second">
    <ng-template matTabContent>
      Content 2
    </ng-template>
  </mat-tab>
  <mat-tab  label="Third">
    <ng-template matTabContent>
      Content 3
    </ng-template>
  </mat-tab>
</mat-tab-group>