Как показать содержимое вкладки материала, только если активен?

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'. Так что я сделал не так?

демо

Answer 1

Вы можете лениво загрузить содержимое вкладок, поместив содержимое в 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>

Answer 2

* ngЕсли физически DOM изменяется, добавляя или удаляя элемент каждый раз, когда изменяется условие. Поэтому, если условие изменяется до того, как оно будет отображено в виде, выдается ошибка. Добавление этого вызовет цикл обнаружения изменений после того, как Angular проверит содержимое, проецируемое в директиву / компонент:

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

STACKBLITZ