代码之家  ›  专栏  ›  技术社区  ›  core114

标签内的角材料垫标签和主第一个标签名称未更改

mat-tab angular-material angular
  •  2
  • core114  · 技术社区  · 6 年前

    我在 angular material tab 中使用了mat tab inside tab,我的问题是主选项卡first tab和子选项卡first tab label name not change,我使用了不同的标签名称,但没有更改。你可以清楚地理解它,请看工作堆栈Blitz实时代码示例 

    <mat tab label=“data sources”>
< /代码> 


    数据源标签名称未显示
    


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


    谢谢
    


    stackblitz live code here
    


    


    我的代码部分
    


    <div class=“container”style=“margin-top:2.5rem;”>
&!--选项卡部分-->
<div class=“sg tabs”>
<mat tab group[selectedIndex]=“0”>
<mat tab label=“数据源”>
<table class=“table”>
THEAD & GT;
T>
<th scope=“col”>
<p class=“sg dt table”>数据名称</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>状态</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>说明</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>用户</p>
&T/TH>
& LT/TR & GT;
&THEAD & GT;
TSBOR>
T>
TD & GT;
<p class=“sg dt tabledetails”>示例</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例</p>
&T/GT;
<td><span class=“sg users”>
<img src=“assets/sg img/sg user sm.png”>
<img src=“assets/sg img/group.png”mattooltip=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
T>
TD & GT;
<p class=“sg dt tabledetails”>示例</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例由</p>创建
&T/GT;
<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=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
T>
TD & GT;
<p class=“sg dt tabledetails”>示例</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例dby</p>
&T/GT;
<td><span class=“sg users”>
<img src=“assets/sg img/sg user sm.png”>
<img src=“assets/sg img/group.png”mattooltip=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
&T/BOT>
&表;







& BR>
<DIV class=“border top”></DIV>
&!---CNS按钮-->

&!--/结束-按钮-->
<DIV class=“SG第二节”>
<mat tab group[selectedIndex]=“0”>
&!--带加速器的创建者-->
<mat选项卡>
<ng模板材料选项卡标签>
<img src=“assets/sg img/spaceship launch pad.png”>
<span class=“sg mat txt”mattooltip=“使用加速器创建”
aria label=“”用<br>加速器创建</span>
</ng模板

&!---图式论坛-->

</mat选项卡>
&!--带加速器的创建者-->
垫标签;
<ng模板材料选项卡标签>
<img src=“assets/sg img/spider.png”>
<span class=“sg mat txt”mattooltip=“使用编辑器创建架构”
aria label=“”使用编辑器创建架构<br></span>
</ng模板


</mat选项卡>
垫标签;
<ng模板材料选项卡标签>
<img src=“assets/sg img/guitar amplifier.png”>
<span class=“sg mat txt”mattooltip=“上载架构”
aria label=“”gt;上载<br>架构</span>
</ng模板


</mat选项卡>
垫标签;
<ng模板材料选项卡标签>
<img src=“assets/sg img/binder.png”>
<span class=“sg mat txt”mattooltip=“连接到企业数据库”
aria label=“”连接到企业<br>数据库</span>
</ng模板

</mat选项卡>
</mat选项卡组>
&L/DIV & GT;




</mat选项卡>
<mat tab label=“我的项目”>
<table class=“table”>
THEAD & GT;
T>
<th scope=“col”>
<p class=“sg dt table”>数据源名称</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>状态</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>说明</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>用户</p>
&T/TH>
& LT/TR & GT;
&THEAD & GT;
TSBOR>
T>
TD & GT;
<p class=“sg dt tabledetails”>示例_schema_1</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例数据库由deaflt</p>创建
&T/GT;
<td><span class=“sg users”>
<img src=“assets/sg img/sg user sm.png”>
<img src=“assets/sg img/group.png”mattooltip=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
T>
TD & GT;
<p class=“sg dt tabledetails”>示例_schema_1</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例数据库由deaflt</p>创建
&T/GT;
<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=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
T>
TD & GT;
<p class=“sg dt tabledetails”>示例_schema_1</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例数据库由deaflt</p>创建
&T/GT;
<td><span class=“sg users”>
<img src=“assets/sg img/sg user sm.png”>
<img src=“assets/sg img/group.png”mattooltip=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
&T/BOT>
&表;
</mat选项卡>
<mat tab label=“已连接的应用程序”>
<table class=“table”>
THEAD & GT;
T>
<th scope=“col”>
<p class=“sg dt table”>数据源名称</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>状态</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>说明</p>
&T/TH>
<th scope=“col”>
<p class=“sg dt table”>用户</p>
&T/TH>
& LT/TR & GT;
&THEAD & GT;
TSBOR>
T>
TD & GT;
<p class=“sg dt tabledetails”>示例_schema_1</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例数据库由deaflt</p>创建
&T/GT;
<td><span class=“sg users”>
<img src=“assets/sg img/sg user sm.png”>
<img src=“assets/sg img/group.png”mattooltip=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
T>
TD & GT;
<p class=“sg dt tabledetails”>示例_schema_1</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>创建的示例数据库</p>
&T/GT;
<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=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
T>
TD & GT;
<p class=“sg dt tabledetails”>示例_schema_1</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>活动</p>
&T/GT;
TD & GT;
<p class=“sg dt tabledetails”>示例</p>
&T/GT;
<td><span class=“sg users”>
<img src=“assets/sg img/sg user sm.png”>
<img src=“assets/sg img/group.png”mattooltip=“添加新用户”
aria label=“聚焦或悬停时显示工具提示的按钮”>
L//Stand & Gt;
&T/GT;
& LT/TR & GT;
&T/BOT>
&表;
</mat选项卡>


</mat选项卡组>
&L/DIV & GT;
&!--/结束-CNS选项卡部分-->

&L/DIV & GT;
< /代码> <在标签内使用了材料标签,我的问题是主标签第一个标签和子标签第一个标签标签名称没有改变,我使用了不同的标签名称但没有改变。你可以清楚地理解它,请看工作堆栈Blitz实时代码示例
    


    <mat-tab label="Data sources "> 

    


    数据源标签名称未显示
    


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


    谢谢
    


    stackblitz live code here
    


    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 回复  |  直到 6 年前
        1
  •  1
  •   Aniket Avhad    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

        2
  •  1
  •   Franklin Pious    6 年前 
    <mat-tab>
  <ng-template mat-tab-label>
    Data Sources
  </ng-template>
  <table> </table>
</mat-tab>

    对数据源使用ng模板,即第一个选项卡。

    updated Stackblitz

    推荐文章
    Kiara  ·  根据条件角度显示多个模板
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Piotr Deja  ·  如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?
    1 年前
    Ben5  ·  服务器端总是接触FormControl
    1 年前
    allforthenoob  ·  我该怎么分类?
    1 年前
    Hamid Elouardaoui  ·  角度生成:发生未处理的异常:服务不再运行
    1 年前
    Hugh Jones  ·  如何创建适用于多个来源的自签名开发证书
    1 年前
    jthorn  ·  角度对象未在HTML中显示
    1 年前
    clem  ·  如何在Angular应用程序中突出显示页面的一部分?
    2 年前
    Kael  ·  在html表格中显示关系api数据-角度
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号