Mat-tab中的組件：如何滾動內部組件

Question

我正在做一個小型的出勤項目，並且在mat-tab組件中有一些表組件。 當表中有溢出時，它將滾動整個組件，我只希望它在內部組件上滾動表。

我嘗試在以下部分中添加“溢出：自動”：

1. 在（應用程序出勤表）選擇器上
2. 內表組件
3. :: ng-deep {.mat-tab-body {溢出：自動}}
4. 在（mat-tab-group）選擇器上
5. 將（app-attendance-table）包裝在（ng-container）或（div）中並添加溢出：auto

這是帶有標簽的外部組件：

  <ng-container>
    <mat-form-field class="date">
      <input
        matInput
        [matDatepicker]="picker"
        placeholder="Select a Date"
        (dateInput)="addEvent($event)"
        [(ngModel)]="currentDate"
      />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </ng-container>
  <mat-tab-group>
    <ng-container *ngFor="let grade of result; let i = index">
      <mat-tab *ngIf="grade.length > 0" [label]="grades[i]">
        <app-attendance-table [dataSource]="grade"></app-attendance-table>
      </mat-tab>
    </ng-container>
  </mat-tab-group>
  <div *ngIf="this.result.length < 1 && !this.loading">
    No Records Found for The Date: {{ currentDate.toDateString() }}
  </div>
  <mat-spinner *ngIf="this.loading"> </mat-spinner>
</div>

這是實際的表組件本身：

  <mat-table #table [dataSource]="dataSource">


    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Student Name </mat-header-cell>
      <mat-cell *matCellDef="let student"
        ><span
          [ngClass]="{
            absent: student.isAbsent() && !student.Reason,
            finished: student.isAbsent() && student.Reason && !student.editing
          }"
        >
          {{ student.Name }}
        </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="grade">
      <mat-header-cell *matHeaderCellDef> Student Grade </mat-header-cell>
      <mat-cell
        [ngClass]="{
          absent: student.isAbsent() && !student.Reason,
          finished: student.isAbsent() && student.Reason && !student.editing
        }"
        *matCellDef="let student"
      >
        {{ student.Grade }}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
      <mat-cell
        [ngClass]="{
          absent: student.isAbsent() && !student.Reason,
          finished: student.isAbsent() && student.Reason && !student.editing
        }"
        *matCellDef="let student"
      >
        {{ student.Status }}
      </mat-cell>
    </ng-container>


    <ng-container matColumnDef="reason">
      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
      <mat-cell *matCellDef="let student">
        <mat-form-field
          class="reasons"
          *ngIf="!student.isPresent()"
          appearance="outline"
        >
          <mat-select
            [(ngModel)]="student.Reason"
            [disabled]="!student.editing"
            placeholder="Select Reason"
            (selectionChange)="makeChange(student)"
          >
            <mat-option
              *ngFor="let reason of reasons; let i = index"
              [value]="reason"
              [disabled]="student.Reason === reason"
            >
              {{ reason }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="comments">
      <mat-header-cell *matHeaderCellDef> Comments </mat-header-cell>
      <mat-cell *matCellDef="let student">
        <mat-form-field *ngIf="!student.isPresent()">
          <input
            matInput
            [(ngModel)]="student.Comments"
            [disabled]="!student.editing"
            (input)="makeChange(student)"
          />
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="edit">
      <mat-header-cell *matHeaderCellDef> </mat-header-cell>
      <mat-cell *matCellDef="let student">
        <button
          *ngIf="!student.isPresent() && !student.editing"
          mat-raised-button
          color="primary"
          (click)="startEditing(student)"
        >
          Edit
        </button>
        <button
          *ngIf="!student.isPresent() && student.editing"
          mat-raised-button
          color="warn"
          (click)="saveEdits(student)"
        >
          Finish
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
</div>

Answer 1

為確保表格可滾動，請將表格以固定的高度包裝在div ，並使其overflow: auto 。

您還可以檢查下面的鏈接，這些鏈接同時具有頁面和表格以及可滾動的內容。

1. https://angular-qfqpwr.stackblitz.io （正在工作的Stackblitz）
2. https://material.angular.io/components/table/examples （帶有粘性標題的表）

Answer 2

要擴展@Pankaj Prakash的答案，您應該在外部容器上將overflow屬性設置為overflow: hidden 。

然后將div包裹在mat單元格周圍，並將屬性設置為overflow: scroll 。 如果只希望垂直滾動，則還可以設置以下屬性： overflow-y: scroll