Question

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

<mat-tab label="Data sources ">

数据源标签名称未显示

任何人都知道如何解决该问题

谢谢

stackblitz live code here

我的代码部分

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

Answer 1

对于第一个标签，也请使用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

Answer 2

<mat-tab>
  <ng-template mat-tab-label>
    Data Sources
  </ng-template>
  <table> </table>
</mat-tab>

使用ng-template作为数据源，即第一个标签。

updated Stackblitz

标签内的Angular Material mat标签和主要的第一标签名称不变

2 个答案: