angular - 仅当处于活动状态时如何显示材料选项卡内容？

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

您可以通过将内容放入with属性来延迟加载选项卡的内容，如下所示：ng-templatematTabContent

<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

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

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

  constructor(private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

堆栈闪电战