如果只有一个选项卡,md-tab隐藏标题

时间:2017-07-10 12:00:57

标签: angular user-interface tabs angular-ui

我是Angular的新手,我使用md-tab-group和md-tab来显示信息,它基本上喜欢:

    <md-tab-group *ngIf="obj">
       <md-tab *ngIf="obj.info1">
           .....
       </md-tab>
      <md-tab *ngIf="obj.info2">
           .....
      </md-tab>
      <md-tab *ngIf="obj.info3">
           .....
      </md-tab>
    </md-tab-group>

现在我被要求隐藏标签标签,如果只有一个标签,但我不知道该怎么做。 在此先感谢您的任何帮助:)

1 个答案:

答案 0 :(得分:0)

您可以简单地使用*ngIf语句来检查数组的长度。如果它大于1,请使用md-tab,如果它是== 1,则使用任何正常的内容区域标记,例如<p></p>。我不认为可以隐藏md-tab-label选择器,只显示md-tab-content md-tab

下面&#39;我能想到的解决方案:

<h1>Array Length > 1</h1>

<md-tab-group *ngIf="obj.length > 1">
  <md-tab *ngFor="let item of obj" [label]="item.title">{{ item.content }}</md-tab>
</md-tab-group>

<h1>Array Length 1</h1>

<p *ngIf="obj.length == 1">
 {{ obj[0].content }}
</p>

Plunker demo

希望这有帮助!

相关问题