Вкладка «Угловой материал» внутри вкладки и имя главной первой вкладки не изменяются - PullRequest
Новая
       38

Вкладка «Угловой материал» внутри вкладки и имя главной первой вкладки не изменяются

0 голосов
/ 25 сентября 2018

Я использовал свой проект для Вкладка углового материала , и я использовал вкладку мат внутри вкладки, моя проблема заключается в том, что первая вкладка главной вкладки и дополнительная вкладка Имя ярлыка 1-й вкладки не изменилось, я использовал другое имя ярлыка, но не изменился,Вы можете ясно понять это, пожалуйста, посмотрите рабочий стек blitz live code example 

<mat-tab label="Data sources ">

Источники данных Имя метки не отображается

Кто-нибудь знает, как решить эту проблему

Спасибо

живой код стекаблиц здесь

Image example

Мой кодовый номер 

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

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018 
<mat-tab>
  <ng-template mat-tab-label>
    Data Sources
  </ng-template>
  <table> </table>
</mat-tab>

Используйте ng-шаблон для источника данных, т.е. для первой вкладки.

обновлен Stackblitz

0 голосов
/ 25 сентября 2018

Для первой вкладки также используйте 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

...