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

扬特拉布

我尝试仅在选择时显示标签内容:

        <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'.知道那么我做错了什么?

演示

万维科

您可以通过使用如下属性将内容放入标签中延迟加载选项卡的内容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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使材料 UI 选项卡标签左?默认情况下它的中心对齐

默认情况下,如何使该选项卡处于活动状态?

默认情况下突出显示的选项卡

bootstrap-vue选项卡-在URL中给定锚的情况下打开选项卡内容

角材料选项卡不显示内容

角材料设计选项卡数据未显示选项卡内容

仅在处于活动状态时如何加载Bootstrap动态选项卡内容?

TestFlight 版本显示在“活动”选项卡下,但在“TestFlight”选项卡下丢失

如何在不下载任何内容的情况下自动刷新选项卡?

在不关闭实际选项卡的情况下打开选项卡

在不使用:: ng-deep和viewEncapsulation.none的情况下,如何在“ Angular Material”选项卡处于活动状态时更改背景颜色?

在某些情况下,如何防止Windows.Forms.TabControl切换选项卡?

如何在不导致selectedIndexChange的情况下更改选项卡

默认情况下如何在新选项卡中打开chrome-extension

如何在不使用setContent的情况下创建Android选项卡

如何在不覆盖选项卡内容的情况下使用小书签通过电子邮件发送到当前页面的链接?

如何删除活动选项卡下的边框

如何在活动底部选项卡下添加指标?

如果在没有更改事件的情况下选中子单选按钮,如何显示父数据选项卡值?

如何在不显示“目标”选项卡/工作表的情况下使用 copyTo(),将用户保持在原处(使用 Google Apps 脚本)?

Javascript:如何显示默认选项卡内容但隐藏其他选项卡内容

仅在选择选项卡的选项卡时,如何加载片段活动的oncreate()方法的片段活动?

Firefox如何在不使用about:内存的情况下监视选项卡的内存使用情况?

如何突出显示角度6中的活动选项卡

仅在包含内容的情况下显示广告位

Rails 4-如何显示选项卡内容而无需单击选项卡标签

如何在单个选项卡菜单(ALL)中显示所有选项卡内容?

Bootstrap:如何通过单击单个选项卡来显示2个选项卡内容?

角度材料选项卡内容 c3js 图表未显示