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>

Answer 2

* ng如果每次条件更改时通过添加或删除元素来物理更改DOM。因此，如果条件在呈现给视图之前发生了变化，则会引发错误。添加此选项将在Angular检查投影到指令/组件中的内容后强制执行更改检测周期：

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

  constructor(private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

STACKBLITZ

仅在活动的情况下如何显示材料选项卡的内容？

2 个答案: