web-dev-qa-db-ja.com

Angular 6マテリアルテーブルのスティッキーヘッダーが機能しない

マットテーブルコンポーネントのヘッダーを上部に固定する必要がありますが、機能しません。

Angular v6.1.7と@ angular/material v6.4.7があります。

「sticky：true」プロパティをmatHeaderRowDefに 誰かがここで言及する として追加しましたが、何もしません:(

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

私はこのサンプルプロジェクトを持っています： https://stackblitz.com/edit/angular-wem2qa

これは、TSファイルのインポートです。

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { MatDialog, MatExpansionPanel, MatSnackBar, MatSort, MatTableDataSource, Sort } from "@angular/material";
angularangular-materialangular-material-6
4
FrancoVP

あなたの問題は粘着性のある行自体ではないかもしれません。次の例のように、行を上部に固定できるようにするには、テーブルの周りにコンテナを追加する必要があります。

.example-container {
  height: 400px;
  overflow: auto;
}

Angular Material documentation： https://material.angular.io/components/table/overview#sticky-rows-and-columns の例を参照してください。また、 CSSタブ。

5
Philipp Escher

これはIEではもうサポートされていないようです。 ドキュメント から抽出：

この機能はChrome、Firefox、Safari、Edgeでサポートされています。 IEではサポートされていませんが、正常に失敗するため、行が固定されません。

別の方法としては、JavaScriptから手動で処理することもできますが、IEのような古いブラウザでは非常にコストがかかります。

0
Sergiu