Angular 如何仅在物料选项卡处于活动状态时显示物料选项卡内容？

仅当选择以下选项时，我才尝试显示选项卡内容：

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

这是可行的，但我得到了

错误：expressionChangedTerithasBeenCheckedError:Expression在被检查后已更改。上一个值：“ngIf:false”。当前值：“ngIf:true”。

那我做错了什么

---

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

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

  constructor(private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

您可以使用

matTabContent

属性将内容放入

ng模板中，如下所示：

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


内容1
内容2
内容3
show us ts file alsoth此博客在我之前遇到此问题时帮助了我您的演示代码与问题中的代码不同……另外，我不确定您想要实现什么，默认材质选项卡有什么问题？这是禁止错误，但我为什么要这样做？是的，回答很好，但无法找到方法在每次通过导航选择选项卡时重新加载它