我将我的项目用于 Angular material tab我在选项卡内使用了 mat 选项卡，我的问题是主选项卡的第一个选项卡和子选项卡的第一个选项卡标签名称未更改，我使用了不同的标签名称但未更改。您可以清楚地了解它，请查看工作堆栈 Blitz 实时代码示例
<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> 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>
最佳答案
对于第一个选项卡也使用 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
关于选项卡内的 Angular Material 垫选项卡和主要的第一个选项卡名称未更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52493945/