Angular 如何冻结垫子 table

Question

我正在尝试冻结垫子 table。在 table 中，我有输入、复选框等。不知何故，我试图根据 ts 中的变量冻结它，因此用户无法更改 table。我试图放置一个叠加层 div，但 table 仍然没有冻结。如果我输入 position:fixed，table 将不再显示，所以这不是解决方案。我该怎么做？ HTML:

<div [id]="requestInProgress ? 'overlay' : ''">
    <div class="mat-elevation-z8 layout-container">
       ...//table
    </div>
</div>

CSS:

#overlay {
  z-index: 10000;
  opacity: 0.5;
  background-color: grey;
}

Answer 1

您可以在 table 之后添加 overlay div 并显示它，当您想阻止 table

的视图时

<div class="container">
    <div class="mat-elevation-z8 layout-container">
       ...//table
    </div>

    <div class="overlay" *ngIf="requestInProgress"></div>
</div>

.container {
 position: relative;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  opacity: 0.5;
  background-color: grey;
}

Answer 2

您只需要禁用 pointer-events 以阻止用户 clicks/interaction。

HTML

<div [ngClass]="{'overlay' : requestInProgress}">
    <div class="mat-elevation-z8 layout-container">
       ...//table
    </div>
</div>

CSS

.overlay{
    pointer-events: none; // The magic line

    z-index: 10000;
    opacity: 0.5;
    background-color: grey;
}

Angular 如何冻结垫子 table

Angular how to freeze mat table

html

css

angular-material

angular