md-tab 如果只有一个标签则隐藏标题

Question

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

现在，如果只有一个选项卡，系统会要求我隐藏选项卡标签，但我不确定该怎么做。在此先感谢您的帮助:)

Answer 1

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

的 md-tab-content

这是我能想到的解决方案：

<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

希望对您有所帮助！

md-tab 如果只有一个标签则隐藏标题

md-tab hide title if only one tab

user-interface

tabs

angular-ui

angular