4

我将我的项目用于Angular 材质选项卡，我在选项卡内使用了 mat 选项卡，我的问题是主选项卡第一个选项卡和子选项卡第一个选项卡标签名称未更改，我使用了不同的标签名称但未更改。您可以清楚地理解它请查看工作堆栈闪电战实时代码示例

<mat-tab label="Data sources ">

数据源标签名称未显示

任何人都知道如何解决这个问题

谢谢

stackblitz 现场代码在这里

图片示例

我的代码部分

<div class="container " style="margin-top: 2.5rem;" >
  <!--Tab Section-->
  <div class="sg-tabs">
    <mat-tab-group [selectedIndex]="0">
      <mat-tab label="Data sources ">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">
              <p class="sg-dt-table">Data name</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Status</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Description</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Users</p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample created by </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png" matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample dby </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          </tbody>
        </table>







        <br>
        <div class="border-top"></div>
        <!-- -CNS Button-->

        <!--/End  - Button-->
        <div class="sg-section-two  " >
          <mat-tab-group  [selectedIndex]="0">
            <!--Creater with accelerator-->
            <mat-tab >
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Spaceship Launch Pad.png">
                <span class="sg-mat-txt" matTooltip="Create with accelerator"
                      aria-label="">Create with <br> accelerator</span>
              </ng-template>

              <!--- Schema forum-->

            </mat-tab>
            <!--Creater with accelerator-->
            <mat-tab>
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Spider.png">
                <span class="sg-mat-txt" matTooltip="Create schema with editor"
                      aria-label="">Create schema <br> with editor</span>
              </ng-template>


            </mat-tab>
            <mat-tab>
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Guitar Amplifier.png">
                <span class="sg-mat-txt" matTooltip="Upload schema"
                      aria-label="">Upload<br>&nbsp;&nbsp;schema</span>
              </ng-template>


            </mat-tab>
            <mat-tab>
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Binder.png">
                <span class="sg-mat-txt" matTooltip="Connect to enterprise databasee"
                      aria-label="">Connect to enterprise  <br> database </span>
              </ng-template>

            </mat-tab>
          </mat-tab-group>
        </div>




      </mat-tab>
      <mat-tab label="My projects ">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">
              <p class="sg-dt-table">Data source name</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Status</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Description</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Users</p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by  by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by  by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          </tbody>
        </table>
      </mat-tab>
      <mat-tab label="Connected apps ">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">
              <p class="sg-dt-table">Data source name</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Status</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Description</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Users</p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by  by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          </tbody>
        </table>
      </mat-tab>


    </mat-tab-group>
  </div>
  <!--/End -CNS Tab Section-->

</div>
4

2 回答 2

6

对于第一个选项卡也使用ng-template

像这样，

<mat-tab>
  <ng-template mat-tab-label>
    <span class="sg-mat-txt" matTooltip="Data sources" aria-label="">Data sources</span>
  </ng-template>
</mat-tab>

这是更新的Stackblitz

于 2018-09-25T09:17:08.013 回答
1 
<mat-tab>
  <ng-template mat-tab-label>
    Data Sources
  </ng-template>
  <table> </table>
</mat-tab>

使用 ng-template 作为数据源，即第一个选项卡。

更新了 Stackblitz

于 2018-09-25T09:17:19.853 回答