需要在 Angular 9 中的分頁器內僅添加 class 或 mat-select-option 的 div 樣式 9

Question

任何人都可以幫我找到我所附的以下圖片的解決方案嗎？

即mat-select-option的mat-paginator內的container div應該需要額外的 class 或該div的樣式。

<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>

<div>
<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample2">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>
</div>

<table >

<!--Here is the following mat-paginator's [pageSize]="[10, 15, 20]" that generates the mat-select with the options 10, 15, 20 -->

<mat-paginator [length]="totalRecords" [pageSize]="[10, 15, 20]" [pageSizeOptions]="1.pageSizeOptions"
    showFirstLastButtons></mat-paginator>

</table>

</main-componont>

Answer 1

由於 Material 動態創建下拉列表，因此您必須將自定義點擊事件綁定到分頁器下拉列表，並在每次用戶打開分頁器下拉列表（而不是任何其他下拉列表）時將 class 添加到 mat-option，如下所示：

  ngAfterViewInit(): void {
    const dropdown = document.querySelector(
      '.mat-paginator-container mat-select'
    );
    console.log('dropdown', dropdown);
    dropdown.addEventListener('click', (evnt) => {
      const list = document.querySelectorAll(
        '.mat-select-panel-wrap .mat-option'
      );
      console.log('list', list);
      list.forEach((element) => {
        element.classList.add('paginator-option');
      });
    });
  }

此外，在 css 文件中使用以下組件 css：

::ng-deep .mat-option.paginator-option {
  color: aqua;
}

演示： stackbliz

Answer 2

您可以嘗試以下代碼。您需要使用 ng-deep。

:host ::ng-deep.mat-paginator .mat-paginator-container{
  justify-content: flex-start;
}

Answer 3

您可以只使用一個簡單的 CSS class ，您必須將其添加到每個元素或更改根 class 元素並讓它隨處改變......我不確定你的目標到底是什么。

一旦添加到您的主要樣式中，這將更改所有墊子選項。css 文件

.mat-option{
  color: red !important;
}

This will change only elements that have this class, the class could be added to the component's CSS file or to the main style.css file as well...

.sample-class {
    color: red !important;
}

Answer 4

為分頁器創建組件，使用 overlayPanelClass 添加 viewProviders

@Component({
    selector: "app-paginator",
    templateUrl: "./paginator.component.html",
    viewProviders: [
        {
            provide: MAT_SELECT_CONFIG,
            useValue: {
                overlayPanelClass: "paginator-panel-class"
            } as MatSelectConfig
        }
    ]
})

在 css 文件中，您可以訪問 mat-option

.paginator-panel-class mat-option {
    color: red !important;
}

Answer 5

答案是否定的，你不能在 angular 中這樣做 9，因為組件在body部分內添加了 div <div class="cdk-overlay-container"> ，並且每個 select 下拉列表都在這個全局空間中呈現，所以你不能只有 select 一個下拉，請升級到更新的 angular 版本。 這是我的建議