Question

相关：https://github.com/angular/components/issues/9739

我尝试了许多解决方案，包括隐藏复选框（以便可以替换with a new button）：

::ng-deep .mat-option:first-child .mat-pseudo-checkbox {
    display: none;
}

或者来自https://stackoverflow.com/a/51942592：

:host {
    ::ng-deep.mat-pseudo-checkbox{
      display: none !important;
    }
}

以及其他各种技术……但没有一个能够成功删除该复选框。

我唯一想到的另一件事就是弄乱ViewEncapsulation或使用mixins；就像Angular Material用来建立他们的网站一样：

https://github.com/angular/material.angular.io/blob/a742dc0/src/app/pages/component-viewer/_component-viewer-theme.scss

@mixin component-viewer-theme($theme) {
  // … prelude omitted for brevity

  guide-viewer,
  app-component-viewer {
    color: mat-color($foreground, text);

    .mat-tab-label:focus {
      color: mat-color($foreground, text);
    }
  }
}

…但是，这需要像他们一样保持主题加载层次结构。有没有更简单/更好的方法？

Answer 1

您可以使用简单的列表“模拟”选择列表。

如果您有一个对象数组

typesOfShoes: any[] = [{data:'Boots'}, 
                       {data:'Clogs'}, 
                       {data:'Loafers'}, 
                       {data:'Moccasins'}, 
                       {data:'Sneakers'}]

您可以使用

<mat-list>
    <ng-container *ngFor="let shoe of typesOfShoes">
            <mat-list-item >
        <button mat-button style="text-align:left;width:100%"
           (click)="shoe.selected=!shoe.selected">
        {{shoe.data}} - {{shoe.selected}}
        </button>
            </mat-list-item>
    </ng-container>
</mat-list>

请参见stackblitz

中的示例

垫选择列表替代复选框？

1 个答案: