如何修复 mat-tab 的标题

Posted 2023-03-06

技术标签:

【中文标题】如何修复 mat-tab 的标题【英文标题】：How to fix the header of mat-tab 【发布时间】：2018-07-09 02:53:51 【问题描述】：

我有 5 个 mat-tab，每个选项卡都有大量数据，所以滚动被添加到那个窗口。有什么方法可以修复 mat-tab 的标题并让内容可以滚动。

我试着把位置：固定；和位置：粘在里面

::ng-deep .mat-tab-label

但这似乎并没有解决问题。我的html

<div class="container">

  <mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
    <mat-tab matTooltip="Tooltip!" label="Pers info">
      <table id="customers" *ngIf="customerData">
        <caption>
          <h4>Customer Information</h4>
        </caption>
        <tr *ngFor="let item of customerData">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>
      <table id="customers" *ngIf="aadhaarAddress">
        <caption>
          <h4>Aadhaar Address</h4>
        </caption>
        <tr *ngFor="let item of aadhaarAddress">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>
      <table id="customers" *ngIf="presentAddress">
        <caption>
          <h4>Present Address</h4>
        </caption>
        <tr *ngFor="let item of presentAddress">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>
      <table id="customers" *ngIf="financialInfo">
        <caption>
          <h4>Financial Health Information</h4>
        </caption>
        <tr *ngFor="let item of financialInfo">
          <td class="key">
            item.key
          </td>
          <td class="value">item.value</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau A">
      <table id="customers" *ngIf="bureauAnalysisData">
        <caption>
          <h4>Bureau Analysis Data</h4>
        </caption>
        <tr *ngFor="let item of bureauAnalysisData">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>

<table id="customers" *ngIf="bureauScoreReasons">
  <caption>
    <h4>Bureau Score Reasons</h4>
  </caption>
<tr *ngFor="let item of bureauScoreReasons">

    <td class="key" >

      item.key
    </td>
    <td class="value" >item.value</td>

  </tr>
</table>

      <table id="customers" *ngIf="bureauEMI">
        <caption>
          <h4>Total EMI in CIBIL</h4>
        </caption>
        <tr *ngFor="let item of bureauEMI">
<td class="key" >

            item.key
          </td>
<td class="value" >item.value</td>

        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Bureau E">
      <table id="customers" *ngIf="enquiry1">
        <caption>
          <h4>Enquiries in last 30 days</h4>
        </caption>
        <tr>
          <th class="hide"></th>
          <th class="value hide">Number of enquiries</th>
          <th class="value hide">Average amount</th>
        </tr>
        <tr *ngFor="let item of enquiry1">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value </td>
          <td class="value" >item.value2</td>
        </tr>
      </table>
      <br>
      <table id="customers" *ngIf="enquiry2">
        <caption>
          <h4>Enquiries in last 31-90 days</h4>
        </caption>
        <tr>
          <th class="hide"></th>
          <th class="value hide">Number of enquiries</th>
          <th class="value hide">Average amount</th>
        </tr>
        <tr *ngFor="let item of enquiry2">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
          <td class="value" >item.value2</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="SMS">
      <table id="customers" *ngIf="smsData">
        <caption>
          <h4>SMS Data Analysis</h4>
        </caption>
        <tr *ngFor="let item of smsData">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>
      <table id="customers" *ngIf="salary">
        <div *ngIf="salary.lenght>0">
          <caption>
            <h4>Salary</h4>
          </caption>
          <tr>
        <th >S.No </th>
        <th >SMS Date </th>
        <th >Sender Name </th>
        <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of salary;let i=index">
            <td>
              i+1
            </td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="balance">
        <div *ngIf="balance.length>0">
          <caption>
            <h4>Insufficient, bounce, return, overdue</h4>
          </caption>
          <tr>
        <th >S.No </th>
        <th >SMS Date </th>
        <th >Sender Name </th>
        <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of balance;let i=index">
            <td>
              i+1
            </td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="nach">
        <div *ngIf="nach.length>0">
          <caption>
            <h4>EMI, ECS & NACH</h4>
          </caption>
          <tr>
          <th >S.No </th>
          <th >SMS Date </th>
          <th >Sender Name </th>
          <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of nach;let i=index">
            <td>
              i+1
            </td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="bureau">
        <div *ngIf="bureau.length>0">
          <caption>
            <h4>Bureau</h4>
          </caption>
          <tr>
          <th >S.No </th>
          <th >SMS Date </th>
          <th >Sender Name </th>
          <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of bureau;let i=index">
            <td>
              i+1
            </td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="companySalary">
        <div *ngIf="companySalary.length>0">
          <caption>
            <h4>Company Salary</h4>
          </caption>
          <tr>
        <th >S.No </th>
        <th >SMS Date </th>
        <th >Sender Name </th>
        <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of companySalary;let i=index">
            <td>
              i+1
            </td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="loan">
        <div *ngIf="loan.length>0">
          <caption>
            <h4>Loan</h4>
          </caption>
          <tr>
        <th >S.No </th>
        <th >SMS Date </th>
        <th >Sender Name </th>
        <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of loan;let i=index">
            <td>i+1</td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="score">
        <div *ngIf="score.length>0">
          <caption>
            <h4>Score</h4>
          </caption>
          <tr>
        <th >S.No </th>
        <th >SMS Date </th>
        <th >Sender Name </th>
        <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of score;let i=index">
            <td>i+1</td>
            <td>item.smsDate</td>
            <td>item.senderName</td>
            <td>item.originalMessage</td>
          </tr>
        </div>
      </table>
      <table id="customers" *ngIf="allSMSData">
        <div *ngIf="allSMSData.length>0">
          <caption>
            <h4>All SMS</h4>
          </caption>
          <tr>
            <th >S.No </th>
            <th >SMS Date </th>
            <th >Sender Name </th>
            <th >Original Message </th>
          </tr>
          <tr *ngFor="let item of allSMSData;let i=index">
            <td >i+1</td>
            <td >item.smsDate</td>
            <td>item.senderName</td>
            <td >item.originalMessage</td>
          </tr>
        </div>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Device">
      <table id="customers" *ngIf="deviceData">
        <caption>
          <h4>Device Data</h4>
        </caption>
        <tr *ngFor="let item of deviceData">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>
      <table id="customers" *ngIf="wifiConnectionInfo">
        <caption *ngIf="wifiConnectionInfo.length>0">
          <h4>Wi-Fi Connections Information</h4>
        </caption>
        <tr *ngIf="wifiConnectionInfo.length>0">
          <th style="padding-left: 75px ">Wi-Fi Name</th>
          <th style="padding-left: 75px; ">No. of times connected in the last 7 days</th>
        </tr>
        <tr *ngFor="let item of wifiConnectionInfo">
          <td class="key" >
            item.key
          </td>
          <td class="value" >item.value</td>
        </tr>
      </table>
      <br>
      <table id="customers" *ngIf="accountInfo">
        <caption *ngIf="accountInfo.length>0">
          <h4>Account Information</h4>
        </caption>
        <tr>
          <th style="padding-left: 75px">Email</th>
          <th style="padding-left: 75px;">Vendor</th>
        </tr>
        <tr *ngFor="let item of accountInfo">
          <td class="key" >
            item.email
          </td>
          <td class="value" >item.vendor</td>
        </tr>
      </table>
      <br>
    </mat-tab>
    <mat-tab label="Json">
      <mat-card>
        <app-ngx-json-viewer [json]="bureauJSON"></app-ngx-json-viewer>
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</div>

css

mat-grid-tile 
  background: lightgrey;




h4 
  color: grey;
  text-align: center;


.key 
  padding-left: 75px !important;
  font-weight: bold;
  color: gray;


.not-available 
  margin-top: 15%;
 text-align: center;
  font-size: 14px;


.mat-tab-body-content 
  height: 100%;



.value 
  padding-left: 75px !important;
  color: gray;


::ng-deep .mat-tab-labels 
   justify-content: center;
   padding: 0px 7px !important;
   font-size: 10px !important;


::ng-deep .mat-tab-label 
  justify-content: center;
  padding: 0px 7px !important;
  font-size: 12px !important;
  min-width: 85px !important;






.hide 
  border: none !important;


#customers 
  padding:0;
  margin:0;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  border-collapse: collapse;



td 
  color: #808080;


.container 
  overflow-y: auto;



#customers td,
#customers th 
  border: 1px solid #ddd;
  padding: 2px;


#customers tr:nth-child(even) 
  background-color: #f2f2f2;


#customers th 
  color: gray;
  text-align: left;
  border-collapse: collapse;

【问题讨论】：

【参考方案1】：

在里面使用position: fixed !important;解决了

:host ::ng-deep .mat-tab-header

但随后该选项卡不可点击，因此添加了z-index:100000;，然后它开始工作。

【讨论】：

【参考方案2】：

用

解决了

::ng-deep .mat-tab-body-wrapper 
           height: 75vh; //required height

【讨论】：

以上是关于如何修复 mat-tab 的标题的主要内容，如果未能解决你的问题，请参考以下文章

如何从 Mat-tab 或 Mat-card (Angular Material) 中删除滚动条

使用 mat-tab-group 以编程方式在 Angular 2 材料中选择 mat-tab

<mat-tab> 角材质内的 routerLink

Angular - mat-tab 中的动态组件

Angular 5 - 在 *ngFor 内部调用的 Mat-tab 方法被多次执行

使用 FlexBox Grid 的角度材料（mat-tab）内的水平滚动条